JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)


Posted in Javascript onOctober 17, 2014

JavaScript onkeypress 事件

用户按下或按住一个键盘按键时会触发 onkeypress 事件。

注意:onkeypress 事件与 onkeydown 事件有些细微差别,onkeypress 事件不做相应功能键按下的处理。具体可将下面的示例更改为 onkeydown 事件后,可输入 !@#$ 等特殊字符即可体会出二者之间的差别。

提示

Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符,而 Netscape/Firefox/Opera 等浏览器使用 event.which。

利用 onkeypress 事件只允许输入数字

下面是一个利用 onkeypress 事件只允许用户在表单域输入数字的例子:

<html>

<head>

<script>

function checkNumber(e)

{

    var keynum = window.event ? e.keyCode : e.which;

    //alert(keynum);

    var tip = document.getElementById("tip");

    if( (48<=keynum && keynum<=57) || keynum == 8 ){

        tip.innerHTML = "";

        return true;

    }else {

        tip.innerHTML = "提示:只能输入数字!";

        return false;

    }

}   

</script>
</head>

<body>

<div>请输入数字:<input type="text" onkeypress="return checkNumber(event);" />

<span id="tip"></span>

</div> 

</body>

</html>

event.keyCode/event.which 得到的是一个按键对应的数字值(Unicode 编码),常用键值列于 onkeydown 事件一节中。例子中对 8 的值做特殊处理,是为了在文本域中支持退格(Backspace)键。

Javascript 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
jquery实现点击页面回到顶部
Nov 23 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 #Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 #Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 #Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 #Javascript
让IE8浏览器支持function.bind()方法
Oct 16 #Javascript
jquery获取radio值(单选组radio)
Oct 16 #Javascript
js数组的基本操作(很全自己整理的)
Oct 16 #Javascript
You might like
php生成随机数或者字符串的代码
2008/09/05 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
为数据添加append,remove功能
2006/10/03 Javascript
JavaScript 基于原型的对象(创建、调用)
2009/10/16 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Django配置文件代码说明
2019/12/04 Python
Python谱减法语音降噪实例
2019/12/18 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
python unichr函数知识点总结
2020/12/16 Python
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
世界上最伟大的马产品:Equiderma
2020/01/07 全球购物
保安自我鉴定范文
2013/12/08 职场文书
中文教师求职信
2014/02/22 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python