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= ...
随机推荐
- setTimeout的实现原理以及setTimeout(0)的使用场景
先看一段代码: var start = new Date(); setTimeout(function(){ var end = new Date(); console.log("Tim ...
- 如何学习Java？学习Java顺序？
Java相对于Asp.Net或Asp.Net MVC来讲,入门是比较困难和烦琐的!它不像.Net哪样有安装开发工具就可以跑程序了,不需要配置复杂的运行环境. 推荐的学习Java的学习顺序如下: 一.J ...
- 64位MATLAB和C混合编程以及联合调试
[环境说明] 电脑操作系统:win 7 旗舰版,64位 MATLAB版本:R2013b VS版本:Microsoft Visual Studio 2010 [操作说明] 1.在原来工程的基础上添加下列 ...
- gamemakerstudio:Sprite的原点
对于某些类型的游戏,例如飞行射击游戏或者顶视角的2D游戏,通常会直接选取图片的中心做为原点.但对于<冰杖秘闻>这样的 2D ARPG 来说,会更多的从三维场景的角度来选择原点,即选择物品底 ...
- CCF201803-1 跳一跳
试题编号: 201803-1 试题名称: 跳一跳 时间限制: 1.0s 内存限制: 256.0MB 问题描述: 问题描述 近来,跳一跳这款小游戏风靡全国,受到不少玩家的喜爱. 简化后的跳一跳规则如下: ...
- spring对数据库的操作、spring中事务管理的介绍与操作
jdbcTemplate的入门 创建maven工程 此处省略 导入依赖 <!-- https://mvnrepository.com/artifact/org.springframework/s ...
- SpringMvc-helloword
说明:在此只说明helloword的简单实现,通过helloword例子先了解springMvc是这样工作的,然后在一步步的研究原理 配置web.xml 1.配置servlet servlet-cla ...
- 开发时复制aspx网页的方法
简单的copy /paste *.aspx网页,所使用的是同一个CodeBehind ,这往往不是我们所想要的!!!我们一般都希望使这两个网页具有各自的 *.cs文件.步骤:①新建一个Web ...
- Android（java）学习笔记27：TextView属性大全
TextView属性大全: android:autoLink 设置是否当文本为URL链接/email/电话号码/map时,文本显示为可点击的链接.可选值(none/web/email/ph ...
- 【[SCOI2007]蜥蜴】
拆点 把每个点拆成入口和出口两个点 以下几种连边方式就行了 对于有蜥蜴的点,\(S\)向入口连1的边 对于能出去的点,出口向汇点连容量为\(inf\)的边 每个点的入口和出口连容量为高度的边 之后能相 ...