jquery实现的限制文本框只能够输入大于0整数

我心飞翔 分类:实例代码

本章节介绍一下如何限制文本框内只能够输入数字。

代码非常的简单,知道了实现原理就可以随意改造了,感兴趣的朋友可以做一下参考。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function(){
  $("#txt").keyup(function(){
    $(this).val($(this).val().replace(/\D|^0/g,''));
  }).bind("paste",function(){
    return false;
  })
});
</script>
</head>
 
<body>
<input id="txt" type="text"/>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

(2).$("#txt").keyup(function(){

  $(this).val($(this).val().replace(/\D|^0/g,''));

})为元素注册keyup事件处理函数,次事件处理函数会将文本框的非数字内容清空。

(3).bind("paste",function(){

  return false;

})为元素注册paste事件处理函数,禁止右键粘贴效果。

二.相关阅读:

(1).keyup事件可以参阅jQuery keyup 事件一章节。

(2).val()方法可以参阅jQuery val()章节。

(3).replace()方法可以参阅正则表达式replace()一章节。

(4).paste事件可以参阅jquery paste事件一章节。

(5).return false可以参阅javascript return false的作用是什么一章节。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容