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= ...
随机推荐
- Eclipse Common API
Platform runtime Defines the extension point and plug-in model. It dynamically discovers plug-ins an ...
- Android ViewPager+TabHost实现首页导航
今天发的是TabHost结合ViewPager实现首页底部导航的效果,虽然说网上有很多这样的Demo,不过呢,我还是要把自己练习写的发出来,没错!就是这么任性: 先上效果图,如下: 代码里面有注释,就 ...
- Python数组使用
python数组的使用 2010-07-28 17:17 1.Python的数组分三种类型: (1) list 普通的链表,初始化后可以通过特定方法动态增加元素. 定义方式:arr = [元素] (2 ...
- 专家来“搞”| IoT DevKit，物联网界新手大礼包等你来拿
专家来“搞” 这是一档基于近期热门云技术,邀请 IT 和开发领域的资深专家,来给大家分享不同领域的云技术操作环境及开发过程中经常遇到的痛点和解决方案,与实战紧密相连,帮助大家学习知识点,顺利解决工作中 ...
- python字符串反转 高阶函数 @property与sorted(八)
(1)字符串反转 1倒序输出 s = 'abcde' print(s[::-1]) #输出: 'edcba' 2 列表reverse()操作 s = 'abcde' lt = list(s) lt.r ...
- 安装OUD报错，unsupported classversion 51.0
查找,错误代码,在一篇博客中看到:补充:后经实例证明,在eclipse中进行开发的时候,build path 中JDK进行类库的编译(就是你使用类在不在这个JDK中),java compiler co ...
- 四、获取远程URL图片
#!/usr/bin/python # -*- coding: UTF-8 -*- import re import urllib def getHtml(url): page = urllib.ur ...
- June 05th 2017 Week 23rd Monday
No great discovery was ever made without a bold guess. 没有大胆的猜测就没有伟大的发现. I've read this sentence just ...
- WP模拟器修改语言为中文方法
对于WP7模拟器来说默认启动时显示的语言为英文,除了操作界面外,如果你的应用支持多国语言必须修改为中文才能显示正确的界面.下面Zune123将WP7 Emulator修改语言为中文的方法写个简单的教程 ...
- LA 4327 多段图
题目链接:https://vjudge.net/contest/164840#problem/B 题意: 从南往北走,横向的时间不能超过 c: 横向路上有权值,求权值最大: 分析: n<=100 ...