首页 > > 网页制作 > Javascript >

JavaScript--文本框中只允许输入数字的操作（其…

2019-01-11 08:33:26来源：博客园阅读 ()

在web网页中，尤其是某些提交表单操作，需要验证文本框输入内容，本文利用文本框键盘事件和事件对象，对文本框只允许输入数字方法进行总结。

1.键盘事件

keydown ---->键盘按下事件 keydown的时候，我们所按的键并没有落入文本框

keyup ----- >键盘弹起事件 keyup的时候，我们所按的键已经落入了文本框，没有机会再取消

所以要达到这种效果，需要使用keydown事件，此时还有机会取消，即利用取消默认行为方法完成按键落入文本框的取消

2.取消默认行为

方法1：return false;

方法2：e.preventDefault();

上述两种方法，用第一个，整个事件结束，后续代码没办法执行，第二个方法，默认事件取消，但是后续代码还可以继续执行。

3.获取用户按下的键

如何判断用户按下的键是数字，首先要获取用户按下的键，事件对象可以给我们传递一些参数，可以通过事件对象，获取按下的内容

e.keyCode 通过在键盘按下0和9，获取数字范围的键盘码范围，只要判断按下的键的键盘码是不是在这个范围就可以判断按下的是不是数字。需要注意，键盘中，字母键上面的数字键和右边的小键盘数字键的keyCode并不相同，要注意规避。

详细代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>文本框输入数字</title>
 6     </head>
 7 
 8     <body>
 9         <input type="text" id="txt" />
10         
11         
12         <script>
13             var txt = document.getElementById('txt');
14 
15             // 键盘事件
16             // keydown 键盘按下的时候
17             // keyup   键盘弹起的时候
18             // keydown 和 keyup的区别  keydown的时候我们所按的键还没有落入文本框
19             // keyup键盘弹起的时候按的键已经落入文本框
20             txt.onkeydown = function(e) {
21                 e = e || window.event;
22                 // e.keyCode  键盘码
23                 // console.log(e.keyCode);
24                 // 判断当前用户按下的键是否是数字
25                 // 如果e.keyCode 的值在 48-57 是数字
26                 // 按下后退键  8，删除一个字符 
27                 if((e.keyCode <48 || e.keyCode>57) && e.keyCode != 8){
28                     //return false;
29                     e.preventDefault();
30                 }
31                 console.log('asdas')
32             }
33         </script>
34     </body>
35 </html>