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 JavaScript获取Url参数,src属性参数
Mar 09 Javascript
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
JS随机数产生代码分享
Feb 24 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
Jun 06 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 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
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jcrop基本参数一览
2013/07/16 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jQuery实现360°全景拖动展示
2015/03/18 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
2016/12/30 NodeJs
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
vue实现淘宝购物车功能
2020/04/20 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
Django框架安装方法图文详解
2019/11/04 Python
Windows10下Tensorflow2.0 安装及环境配置教程(图文)
2019/11/21 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
若干个Java基础面试题
2015/05/19 面试题
员工离职证明范本
2015/06/12 职场文书
门卫管理制度范本
2015/08/05 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python
js判断两个数组相等的5种方法
2022/05/06 Javascript