基于jQuery实现文本框只能输入数字(小数、整数)


Posted in Javascript onJanuary 14, 2016

在实际应用中,文本框中有时候只能够允许输入整数,但是有时候可能更为"博爱"一点,可以允许输入浮点数,下面就通过实例代码介绍一下如何利用jquery实现文本框只能输入小数,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://3water.com/" />
<title>三水点靠木</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
$(".NumText").keyup(function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
}).bind("paste",function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

以上代码实现了我们的要求,文本框中只能够输入整数或者浮点数,代码比较简单这里就不多介绍了。

下面给大家介绍如何利用jquery实现文本框只能够输入整数:

有时候可能需要规定文本框内容只能够输入整数,下面给出一段能够实现此功能的代码实例,供需要的朋友参考。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://3water.com" />
<title>三水点靠木</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
$(".NumText").keyup(function(){ 
$(this).val($(this).val().replace(/\D|^0/g,'')); 
}).bind("paste",function(){
$(this).val($(this).val().replace(/\D|^0/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

以上代码实现了预期的要求,文本框中只能够输入整数,下面介绍一下它的实现过程。

代码注释:

1.$(function(){}),当文档结构完全加载完毕再去执行函数中的代码。
2.$(".NumText").keyup(function(){}),为文本框注册keyup事件处理函数。
3.$(this).val($(this).val().replace(/\D|^0/g,'')),通过replace()函数利用正则表达式,将非数字内容替换为空。
4.bind("paste",function(){$(this).val($(this).val().replace(/\D|^0/g,''));}),注册paste事件处理含糊,当然这里使用的是链式调用,它可以防止用户使用ctrl+v方式复制黏贴。

以上代码写的比较简单,部分难点给大家附有注释,相信对大家有所帮助。

Javascript 相关文章推荐
document.onreadystatechange事件的用法分析
Oct 17 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
vue 中filter的多种用法
Apr 26 Javascript
Angularjs中的$apply及优化使用详解
Jul 02 Javascript
前端Electron新手入门教程详解
Jun 21 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
vue项目实现分页效果
Mar 24 Vue.js
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 #Javascript
基于javascript实现随机颜色变化效果
Jan 14 #Javascript
JavaScript事件类型中UI事件详解
Jan 14 #Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 #Javascript
详解JavaScript中localStorage使用要点
Jan 13 #Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 #Javascript
jquery悬浮提示框完整实例
Jan 13 #Javascript
You might like
Protoss兵种对照表
2020/03/14 星际争霸
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP安全性漫谈
2012/06/28 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php常用Stream函数集介绍
2013/06/24 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
JavaScript使用function定义对象并调用的方法
2015/03/23 Javascript
js实现数组转换成json
2015/06/26 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
2017/06/30 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python处理json数据中的中文
2014/03/06 Python
python实现sublime3的less编译插件示例
2014/04/27 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
python中数据库like模糊查询方式
2020/03/02 Python
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
2013/07/19 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
预备党员自我批评思想汇报
2014/10/10 职场文书
云冈石窟导游词
2015/02/04 职场文书
2015年小学生自我评价范文
2015/03/03 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书