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查找某元素中的所有图片地址的方法
Jan 16 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
jquery之别踩白块游戏的简单实现
Jul 25 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
详解javascript设计模式三:代理模式
Mar 25 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
js获取select选中的option的text示例代码
2013/12/19 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
常用的javascript设计模式
2017/01/11 Javascript
在vue中通过axios异步使用echarts的方法
2018/01/13 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
2018/09/19 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
小程序实现抽奖动画
2020/04/16 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
python中OrderedDict的使用方法详解
2017/05/05 Python
简单分析python的类变量、实例变量
2019/08/23 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
项目副经理岗位职责
2013/12/30 职场文书
女方回门宴答谢词
2014/01/14 职场文书
个人作风剖析材料
2014/02/02 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
政风行风整改方案
2014/10/25 职场文书
员工工作能力评语
2014/12/31 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android