jQuery 文本框中只能输入正整数
分类:实例代码
文本框的输入的内容可能会有各种限制,比如文本框中只能够输入正整数。
下面就是一段能够实现此功能的代码实例,需要的可以做一下参考。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.pipipi.net/" /> <title>前端教程网</title> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function(){ $("input").keyup(function(){ $(this).val($(this).val().replace(/\D|^0/g,'')); }).bind("paste",function(){ return false; }) }); </script> </head> <body> <input type="text"/> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
(2).$("input").keyup(function(){}),为input元素注册keyup事件处理函数。
(3).$(this).val($(this).val().replace(/\D|^0/g,''));,将非数字或者以0为开头的替换为空。
(4).bind("paste",function(){
return false;
}),为文本框注册paste事件处理函数,这个是为了防止对文本框复制黏贴操作。
二.相关阅读:
(1).keyup 事件参阅jQuery keyup一章节。
(2).val() 参阅jQuery val()一章节。
(3).replace() 参阅正则表达式replace()一章节。
(4).bind() 参阅jquery的on()、bind()、live()和delegate()一章节。
(5).paste 事件参阅onpaste事件用法简单介绍一章节。
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu