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 相关文章推荐
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
javaScript如何生成xmlhttp
Dec 16 Javascript
JavaScript函数参数使用带参数名的方式赋值传入的方法
Mar 19 Javascript
JavaScript 基础函数_深入剖析变量和作用域
May 18 Javascript
JS常用算法实现代码
Nov 14 Javascript
angular实现form验证实例代码
Jan 17 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 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
javascript 小型动画组件与实现代码
2010/06/02 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
php单例模式示例分享
2015/02/12 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
2011/07/15 Javascript
js闭包的用途详解
2014/11/09 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
vue组件从开发到发布的实现步骤
2018/11/11 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python生命游戏实现原理及过程解析(附源代码)
2019/08/01 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
2014/06/23 HTML / CSS
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
2015年征兵工作总结
2015/07/23 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android