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 相关文章推荐
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
jQuery实现根据滚动条位置加载相应内容功能
Jul 18 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
原生js实现无缝轮播图
Jan 11 Javascript
Vue3为什么这么快
Sep 23 Javascript
JavaScript 中的六种循环方法
Jan 06 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制作图型计数器的例子
2006/10/09 PHP
ThinkPHP实现一键清除缓存方法
2014/06/26 PHP
php实现随机显示图片方法汇总
2015/05/21 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
为Extjs加加速(javascript加速)
2010/08/19 Javascript
一些常用且实用的原生JavaScript函数
2010/09/08 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
nodejs中使用monk访问mongodb
2014/07/06 NodeJs
jQuery中end()方法用法实例
2015/01/08 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
深入了解javascript 数组的sort方法
2018/06/01 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
对Python 内建函数和保留字详解
2018/10/15 Python
更改Python的pip install 默认安装依赖路径方法详解
2018/10/27 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
python lambda的使用详解
2021/02/26 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
SQL语言面试题
2013/08/27 面试题
中学教师培训制度
2014/01/31 职场文书
运动会入场词50字
2014/02/20 职场文书
机关党员进社区活动总结
2014/07/05 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
教师节慰问信
2015/02/15 职场文书
施工安全协议书
2016/03/22 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js