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代码
Mar 06 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
Aug 23 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 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安全配置详细说明
2011/09/26 PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
js 火狐下取本地路径实现思路
2013/04/02 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
详解node.js 下载图片的 2 种方式
2018/03/02 Javascript
JS实现点击按钮可实现编辑功能
2018/07/03 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python网络编程实例简析
2014/09/26 Python
Python Socket实现简单TCP Server/client功能示例
2017/08/05 Python
Python简单基础小程序的实例代码
2019/04/28 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
解决python 找不到module的问题
2020/02/12 Python
Python在终端通过pip安装好包以后在Pycharm中依然无法使用的问题(三种解决方案)
2020/03/10 Python
QML用PathView实现轮播图
2020/06/03 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
艾滋病宣传标语
2014/06/25 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
英语邀请函范文
2015/02/02 职场文书
爱的教育读书笔记
2015/06/26 职场文书
《珍珠鸟》教学反思
2016/02/16 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
python异步的ASGI与Fast Api实现
2021/07/16 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技