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的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
详解Vue方法与事件
Mar 09 Javascript
JavaScript基础之this详解
Jun 04 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
微信小程序云开发详细教程
May 16 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 session有效期问题
2009/04/26 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
深入解析php之sphinx
2013/05/15 PHP
mac下安装nginx和php
2013/11/04 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
接收键盘指令的脚本
2006/06/26 Javascript
JS文本框不能输入空格验证方法
2013/03/19 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JavaScript实现给按钮加上双重动作的方法
2015/08/14 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
Sea.JS知识总结
2016/05/05 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
海外淘书首选:AbeBooks
2017/07/31 全球购物
工作表现评语
2014/01/19 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
大学生社会实践方案
2014/05/11 职场文书
高温慰问简报
2015/07/21 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
入团申请书格式
2019/06/20 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电