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= ...
随机推荐
- C++基础--malloc和new的区别
(1)malloc在C和C++中都可以使用,用来申请一段内存:申请的内存一定要用free释放,然后把指针置为null: new只能在C++中使用,用于动态内存分配:new的对象要delete掉: (2 ...
- Siebel escript学习笔记
Siebel(escript)的学习:1.Siebel的数据类型Primitive(原始的)---Number,Integer,Hexadecimal(十六进制),Octal(八进制),Floatin ...
- 一、选择与安装——Linux学习笔记
A)为什么要用Linux做服务器? 网络理由: 1.linux本身是网络操作系统,支持所有TCP/IP协议,网络功能是内核中六大模块之一 2.linux和unix兼容,unix是早期的服务器霸主,现在 ...
- Exchange 2016中的削减内容
一.从Exchange 2013到Exchange 2016所废弃的功能. 在Exchange 2016中已经有部分Exchange 2013的功能不在提供支持. 1.体系结构 功能 注释和缓解操作 ...
- IOS 远程推送通知(UIRemoteNotification)
● 什么是远程推送通知 ● 顾名思义,就是从远程服务器推送给客户端的通知(需要联网) ● 远程推送服务,又称为APNs(Apple Push Notification Services) ● ...
- libevent-select模型分析
下面内容为windows下select模型分析,原博客链接 http://blog.csdn.net/fish_55_66/article/details/50352080 https://www.c ...
- DSL-领域特定语言（英语：domain-specific language、DSL）
领域特定语言(英语:domain-specific language.DSL)指的是专注于某个应用程序领域的计算机语言.
- Android数字签名解析(一)
一.数字签名概述 所谓"数字签名"就是通过某种password运算生成一系列符号及代码组成电子password进行签名,来取代书写签名或印章. 数字签名有两种功效:一是能确定消息 ...
- MySQL：数据库入门篇4
1. 视图 创建视图 create view 视图名字 as 查询sql语句; drop view 视图名字; alter view 视图名字 as 查询sql语句; 2. 触发器 1. 插入事件触发 ...
- Going deeper with convolutions(GoogLeNet、Inception)
从LeNet-5开始,cnn就有了标准的结构:stacked convolutional layers are followed by one or more fully-connected laye ...