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 相关文章推荐
用jscript实现新建和保存一个word文档
Jun 15 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
javascript实现切换td中的值
Dec 05 Javascript
JavaScript事件委托实例分析
May 26 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
Angularjs按需查询实例代码
Oct 30 Javascript
通过说明与示例了解js五种设计模式
Jun 17 Javascript
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计划任务、定时执行任务的实现代码
2011/04/23 PHP
thinkphp3.2嵌入百度编辑器ueditor的实例代码
2017/07/13 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
javascript天然的迭代器
2010/10/29 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
2017/12/27 jQuery
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
python中zip()方法应用实例分析
2016/04/16 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
Python3.4 splinter(模拟填写表单)使用方法
2018/10/13 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
车工岗位职责
2013/11/26 职场文书
生物学学生自我评价
2014/01/17 职场文书
大课间活动制度
2014/01/18 职场文书
质量标语大全
2014/06/12 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
安全教育培训制度
2015/08/06 职场文书