基于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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
Jul 24 Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
window.dialogArguments 使用说明
Apr 11 Javascript
仿百度输入框智能提示的js代码
Aug 22 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
JS常用字符串处理方法应用总结
May 22 Javascript
原生js编写焦点图效果
Dec 08 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 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
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
jquery自定义属性(类型/属性值)
2013/05/21 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
详解Vue之父子组件传值
2019/04/01 Javascript
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[55:25]VGJ.T vs Optic Supermajor小组赛D组 BO3 第三场 6.3
2018/06/04 DOTA
新手该如何学python怎么学好python?
2008/10/07 Python
Python实现二叉堆
2016/02/03 Python
Python_LDA实现方法详解
2017/10/25 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
值得收藏的10道python 面试题
2019/04/15 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
幼儿园元旦家长感言
2014/02/27 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
向女朋友道歉的话
2015/01/20 职场文书