基于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 相关文章推荐
Jquery 基础学习笔记
May 29 Javascript
jquery中的sortable排序之后的保存状态的解决方法
Jan 28 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
AngualrJS中的Directive制作一个菜单
Jan 26 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
React学习笔记之列表渲染示例详解
Aug 22 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
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
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
php.ini中文版
2006/10/09 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
javascript动态加载三
2012/08/22 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
原生JS实现九宫格抽奖效果
2017/04/01 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
vue3 watch和watchEffect的使用以及有哪些区别
2021/01/26 Vue.js
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
详解Python字符串对象的实现
2015/12/24 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
tensorflow 模型权重导出实例
2020/01/24 Python
高二地理教学反思
2014/01/24 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
python中的random模块和相关函数详解
2022/04/22 Python