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 相关文章推荐
javascript 写类方式之八
Jul 05 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
JavaScript基本语法学习教程
Jan 14 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
vue源码nextTick使用及原理解析
Aug 13 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(1)
2006/10/09 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
php实现等比例不失真缩放上传图片的方法
2016/11/14 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
jquery 弹出层实现代码
2009/10/30 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
jQuery实现鼠标划过修改样式的方法
2015/04/14 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
jquery实现从数组移除指定的值
2015/06/24 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
用Python实现一个简单的线程池
2015/04/07 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
CSS3绘制有活力的链接下划线
2016/07/14 HTML / CSS
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
物流司机岗位职责
2013/12/28 职场文书
整改报告怎么写
2014/11/06 职场文书
2015年银行员工工作总结
2015/04/24 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
app场景下uniapp的扫码记录
2022/07/23 Java/Android