JavaScript--文本框中只允许输入数字的操作（其他字符不显示）
在web网页中，尤其是某些提交表单操作，需要验证文本框输入内容，本文利用文本框键盘事件和事件对象，对文本框只允许输入数字方法进行总结。
1.键盘事件
keydown ---->键盘按下事件 keydown的时候，我们所按的键并没有落入文本框
keyup ----- >键盘弹起事件 keyup的时候，我们所按的键已经落入了文本框，没有机会再取消
所以要达到这种效果，需要使用keydown事件，此时还有机会取消，即利用取消默认行为方法完成按键落入文本框的取消
2.取消默认行为
方法1：return false;
方法2：e.preventDefault();
上述两种方法，用第一个，整个事件结束，后续代码没办法执行，第二个方法，默认事件取消，但是后续代码还可以继续执行。
3.获取用户按下的键
如何判断用户按下的键是数字，首先要获取用户按下的键，事件对象可以给我们传递一些参数，可以通过事件对象，获取按下的内容
e.keyCode 通过在键盘按下0和9，获取数字范围的键盘码范围，只要判断按下的键的键盘码是不是在这个范围就可以判断按下的是不是数字。需要注意，键盘中，字母键上面的数字键和右边的小键盘数字键的keyCode并不相同，要注意规避。
详细代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本框输入数字</title>
</head> <body>
<input type="text" id="txt" /> <script>
var txt = document.getElementById('txt'); // 键盘事件
// keydown 键盘按下的时候
// keyup 键盘弹起的时候
// keydown 和 keyup的区别 keydown的时候我们所按的键还没有落入文本框
// keyup键盘弹起的时候按的键已经落入文本框
txt.onkeydown = function(e) {
e = e || window.event;
// e.keyCode 键盘码
// console.log(e.keyCode);
// 判断当前用户按下的键是否是数字
// 如果e.keyCode 的值在 48-57 是数字
// 按下后退键 8，删除一个字符
if((e.keyCode <48 || e.keyCode>57) && e.keyCode != 8){
//return false;
e.preventDefault();
}
console.log('asdas')
}
</script>
</body>
</html>
JavaScript--文本框中只允许输入数字的操作（其他字符不显示）的更多相关文章
- C# TextBox中只允许输入数字的方法
1.在Winform(C#)中要实现限制Textbox只能输入数字,一般的做法就是在按键事件中处理, 判断keychar的值.限制只能输入数字,小数点,Backspace,del这几个键.数字0-9所 ...
- javascript 文本框中,判断回车键触发事件 兼容IE&FireFox
1.onkeypress&onkeydown区别 onkeypress 事件在用户按下并放开任何字母数字键时发生.但是系统按钮(例如:箭头键.功能键)无法得到识别. onkeydown 事件在 ...
- 使用Javascript限制文本框只允许输入数字
很多时候需要用到限制文本框的数字输入,试过许多方法,都不太理想,遂决定自己实现一个来玩玩.曾经使用过的方法通过onkeydown事件来控制只允许数字: <input onkeydown=&quo ...
- WinForm笔记一：文本框只允许输入数字
在WinForm的文本框中,有时候只允许数字,而不能输入除数字以外的其他字符,要调用TextBox的KeyPress事件,代码如下: //只允许输入数字 if (e.KeyChar<'0'||e ...
- javascript限制input只允许输入数字
在做数据提交的表单时,经常要对input输入内容的类型进行限制,譬如javascript限制input只允许输入数字,最好的方法当然是使用javascript,因为它不用与服务器交互,大大减轻了服务器 ...
- android、ipone在文本框中输入文字的不同
1.android机会输入时会在键盘上先显示,你确定后再填充如文本框 2.ipone机是你输入时就直接填充到文本框,当你选择输入信息时,就会先把文本框的内容清空,在填充选择的文字,这时就会有个问题,如 ...
- 只允许输入数字的TextBox控件
[实例说明] 可以在TextBox控件中轻松地输入文本信息,输入的文本信息可以包括字母.数字.汉字等. 如果需要用户在TextBox控件中填写年龄信息,那么年龄信息应当只允许数字,怎么限制用户输入其他 ...
- 一句JS搞定只允许输入数字和字母
一句JS搞定输入框只允许用户输入数字和字母类型的内容,对象是input输入框,当然也可以其它对象,只不过input输入框用的频率非常高.一句代码,不信么?那就看下边代码: <INPUT clas ...
- ASP.Net TextBox控件只允许输入数字
原文:ASP.Net TextBox控件只允许输入数字 1.1.在Asp.Net TextBox 控件的 OnKeyPress 事件中指定输入键盘码必须为数字: <asp:TextBox ID= ...
随机推荐
- Celery-------项目目录
在实际应用中Celery的目录是有规则的 要满足这样的条件才可以 目录Celery_task这个名字可以随意,但是这个目录下一定要有一个celery.py这个文件 from celery import ...
- Vue表格中，对数据进行转换、处理
众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在 ...
- yeoman-bower-grunt之间的关系
npm install -g yo 前置技能 Node and NPM nodeJs就是基于谷歌v8引擎的一个javascript环境,使js不仅可以运行在浏览器端,也能在服务器端运行. NPM(No ...
- javascript实现数据结构: 稀疏矩阵之三元组线性表表示
稀疏矩阵(Sparse Matrix):对于稀疏矩阵,目前还没有一个确切的定义.设矩阵A是一个n*m的矩阵中有s个非零元素,设 δ=s/(n*m),称δ为稀疏因子, 如果某一矩阵的稀疏因子δ满足δ≦ ...
- EBS登陆界面IE显示异常
使用在IE浏览登陆EBS时: 在登陆界面,登录和取消的按钮显示异常: 在进入HOME界面时,显示的职责全为undefined. 原因: 由于IE版本的兼容性. 解决方法: 浏览器 菜单->工具- ...
- Shader之性能优化
1.像素>>顶点数>>物体个数:shader中的计算应首先考虑放在script,其次vert,最后frag中 2.尽量用精度小的类型替换精度大的类型(特别是在frag中,要尽可 ...
- 内存分配malloc函数注意事项。
malloc的全称是memory allocation,中文叫动态内存分配,用于向系统申请分配指定字节的内存空间 原型:extern void *malloc(unsigned int num_byt ...
- keras 多输出问题
转自:https://github.com/Xls1994/DeepLearningCode/blob/master/Keras/HedgeScope/multiOutputLSTM.py
- Azure进阶攻略丨Azure网络通不通，PsPing&PaPing告诉你答案
很多时候,为了解决一些问题,要查各种文档,很麻烦你造吗!做「伸手党」又容易被鄙视,这时候就需要用到[Azure 进阶攻略]啦!特此,我们推出关于 Azure 常用操作指南的系列文章,每篇涉及一个 Az ...
- python操作excel (openpyxl)
最近看到好几次群里有人问xlwt.wlrd的问题,怎么说呢,如果是office2007刚出来,大家用xlsx文件用不习惯,还可以理解,这都10年过去了喂,就算没有进化到office2016,还在用of ...