在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--文本框中只允许输入数字的操作（其他字符不显示）的更多相关文章

  1. C# TextBox中只允许输入数字的方法

    1.在Winform(C#)中要实现限制Textbox只能输入数字,一般的做法就是在按键事件中处理, 判断keychar的值.限制只能输入数字,小数点,Backspace,del这几个键.数字0-9所 ...

  2. javascript 文本框中,判断回车键触发事件 兼容IE&FireFox

    1.onkeypress&onkeydown区别 onkeypress 事件在用户按下并放开任何字母数字键时发生.但是系统按钮(例如:箭头键.功能键)无法得到识别. onkeydown 事件在 ...

  3. 使用Javascript限制文本框只允许输入数字

    很多时候需要用到限制文本框的数字输入,试过许多方法,都不太理想,遂决定自己实现一个来玩玩.曾经使用过的方法通过onkeydown事件来控制只允许数字: <input onkeydown=&quo ...

  4. WinForm笔记一：文本框只允许输入数字

    在WinForm的文本框中,有时候只允许数字,而不能输入除数字以外的其他字符,要调用TextBox的KeyPress事件,代码如下: //只允许输入数字 if (e.KeyChar<'0'||e ...

  5. javascript限制input只允许输入数字

    在做数据提交的表单时,经常要对input输入内容的类型进行限制,譬如javascript限制input只允许输入数字,最好的方法当然是使用javascript,因为它不用与服务器交互,大大减轻了服务器 ...

  6. android、ipone在文本框中输入文字的不同

    1.android机会输入时会在键盘上先显示,你确定后再填充如文本框 2.ipone机是你输入时就直接填充到文本框,当你选择输入信息时,就会先把文本框的内容清空,在填充选择的文字,这时就会有个问题,如 ...

  7. 只允许输入数字的TextBox控件

    [实例说明] 可以在TextBox控件中轻松地输入文本信息,输入的文本信息可以包括字母.数字.汉字等. 如果需要用户在TextBox控件中填写年龄信息,那么年龄信息应当只允许数字,怎么限制用户输入其他 ...

  8. 一句JS搞定只允许输入数字和字母

    一句JS搞定输入框只允许用户输入数字和字母类型的内容,对象是input输入框,当然也可以其它对象,只不过input输入框用的频率非常高.一句代码,不信么?那就看下边代码: <INPUT clas ...

  9. ASP.Net TextBox控件只允许输入数字

    原文:ASP.Net TextBox控件只允许输入数字 1.1.在Asp.Net TextBox 控件的 OnKeyPress 事件中指定输入键盘码必须为数字: <asp:TextBox ID= ...

随机推荐

  1. 日期函数new Date()浏览器兼容性问题

    项目上与时间相关的地方特别多,与时间格式相关都使用了moment.js轻量级日期处理库,在开发中出现了几次浏览器兼容性问题,所以总结一下new Date()和moment.js在各大浏览器中兼容性问题 ...

  2. Grunt压缩图片和JS

    今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install ...

  3. Eclipse Startup

    First of all, we take a look at class EclipseStarter /********************************************** ...

  4. AMP+EPP3.0的开发环境配置

    经过摸索,总结出下列Apache.MySQL.PHP.EPP.ZendDebugger的开发环境配置方法: 版本: Apache: Apache-httpd-2.2.25-win32-x86-no_s ...

  5. Qt 窗口移动实现

    很多人觉得系统自带的标题栏太丑了,想要自绘一个标题栏,去掉了系统自带的标题栏后,就需要自己实现窗口移动,下面的代码就是实现窗口移动. widget.h #ifndef WIDGET_H #define ...

  6. 【转】OpenGL概述

    英文原文 中文译文 1. 计算机图像硬件 1.1 GPU(图像处理单元) 如今,计算机拥有用来专门做图像处理显示的GPU模块,拥有独立的图像处理储存(显存). 1.2 像素和画面 任何图像显示都是基于 ...

  7. 发送请求获取响应内容(c#)

    C#请求url,获取响应的脚本 public string ResultOfApi(string url) { //发送请求 HttpWebRequest request = null; HttpWe ...

  8. ACM-百度之星资格赛之Energy Conversion——hdu4823

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/lx417147512/article/details/26400079 Energy Convers ...

  9. HASH JION AND NESTED JION

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/sssbbbryj/article/details/27795905  关于HASH_JION的原 ...

  10. bzoj 2434 [Noi2011]阿狸的打字机——AC自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2434 dfs AC自动机,走过的点权值+1,回溯的时候权值-1:走到询问的 y 串的节点,看 ...