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= ...
随机推荐
- 51nod 1597 有限背包计数问题 (背包 分块)
题意 题目链接 Sol 不会做啊AAA.. 暴力上肯定是不行的,考虑根号分组 设\(m = \sqrt{n}\) 对于前\(m\)个直接暴力,利用单调队列优化多重背包的思想,按\(\% i\)分组一下 ...
- Web站点如何防范XSS、CSRF、SQL注入攻击
XSS跨站脚本攻击 XSS跨站脚本攻击指攻击者在网页中嵌入客户端脚本(例如JavaScript),当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的,比如获取用户的Cookie,导 ...
- java线程安全问题原理性分析
1.什么是线程安全问题? 从某个线程开始访问到访问结束的整个过程,如果有一个访问对象被其他线程修改,那么对于当前线程而言就发生了线程安全问题:如果在整个访问过程中,无一对象被其他线程修改,就是线程安全 ...
- 转：SQL Server附加数据库提示“版本为661，无法打开，支持655版本……”
在我们使用别人导出的数据库的时候,有时候我们会通过附加数据库的方法,把别人导出的数据库附加到我们的电脑中,这时,或许你会遇到这种问题,附加时,提示版本为XXX,无法打开,支持AAA版本. 这是怎么回事 ...
- CSS如何设置换行文字自动对齐
CSS如何设置换行文字自动对齐 如图所示: 代码实现如下: <ul class='warn-page-content'> <li> ...
- JSP初学者5
JSP中include指令和include动作的区别 include指令是编译阶段的指令,即include所包含的文件的内容是编译的时候插入到JSP文件中, JSP引擎在判断JSP页面未被修改,否则 ...
- IOS APP 瘦身
只保留其中一宗编译环境包 lipo -thin armv7 XXAPP -output XXAPP.armv7
- ASP.NET MVC4 with MySQL: Configuration Error (MySql.Web.v20)
今天在浏览ASP.NET项目时,提示如下错误: Could not load file or assembly ‘MySql.Web.v20, Version=6.9.4.0, Culture=neu ...
- 【转】QT创建子对话框的方法
原文地址:http://blog.csdn.net/baidu_18991997/article/details/42713159 代码实现功能:单击某个按钮后,弹出对话框,对话框中的内容可自行设计. ...
- show_sql和format_sql
<property name="show_sql">true</property> <property name="hibernate.fo ...