jquery限定文本框只能输入数字(整数和小数)


Posted in Javascript onJanuary 08, 2016

本文实例介绍了jquery限定文本框只能输入数字的详细代码,分享给大家供大家参考,具体内容如下

先来一段规定文本框只能够输入数字包括小数的jQuery代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312"> 
<title>三水点靠木</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
//文本框只能输入数字(包括小数),并屏蔽输入法和粘贴 
jQuery.fn.number=function(){
 this.bind("keypress",function(e){ 
 var code=(e.keyCode?e.keyCode:e.which); //兼容火狐 IE 
 //火狐下不能使用退格键 
 if(!$.browser.msie&&(e.keyCode==0x8)){return;} 
 if(this.value.indexOf(".")==-1){return (code >= 48 && code<= 57)||(code==46);}
 else{return code >= 48 && code<= 57} 
 }); 
 this.bind("paste",function(){return false;}); 
 this.bind("keyup",function(){
 if(this.value.slice(0,1) == ".")
 { 
  this.value = ""; 
 } 
 }); 
 this.bind("blur",function(){ 
 if(this.value.slice(-1) == ".")
 { 
  this.value = this.value.slice(0,this.value.length-1); 
 } 
 }); 
}; 
$(function(){ 
 $("#txt").number();
}); 
</script>
</head>
<body>
<input type="text" id="txt" />
</body>
</html>

2、jQuery如何规定文本框只能输入整数:
有时候文本框的内容只能够是数字,并且还只能够是整数,例如年龄,你不能够填写20.8岁,下面就通过代码实例介绍一下如何实现此功能,希望给需要的朋友带来帮助,代码如下:

<html> 
<head> 
<meta charset="gb2312"> 
<title>蚂蚁部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
//文本框只能输入数字(不包括小数),并屏蔽输入法和粘贴 
jQuery.fn.integer=function(){ 
 this.bind("keypress",function(e){ 
 var code=(e.keyCode?e.keyCode:e.which); //兼容火狐 IE 
 //火狐下不能使用退格键 
 if(!$.browser.msie&&(e.keyCode==0x8))
 { 
  return ; 
 } 
 return code >= 48 && code<= 57; 
 }); 
 this.bind("paste",function(){ 
 return false; 
 }); 
 this.bind("keyup",function(){ 
 if(/(^0+)/.test(this.value)) 
 { 
 this.value = this.value.replace(/^0*/,''); 
 } 
 }); 
}; 
$(function(){ 
 $("#txt").integer();
}); 
</script>
</head>
<body>
<input type="text" id="txt" />
</body>
</html>

以上代码实现了我们的要求,文本框中只能够输入整数。

希望本文所述对大家学习jquery程序设计有所帮助。

Javascript 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
uni-app 组件里面获取元素宽高的实现
Dec 27 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 #Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 #Javascript
javascript中select下拉框的用法总结
Jan 07 #Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 #Javascript
js创建对象的方法汇总
Jan 07 #Javascript
JavaScript截取、切割字符串的技巧
Jan 07 #Javascript
js确认框confirm()用法实例详解
Jan 07 #Javascript
You might like
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
JavaScript 放大镜 放大倍率和视窗尺寸
2011/05/09 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
2018/04/26 Javascript
AngularJS实现的base64编码与解码功能示例
2018/05/17 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
使用tensorflow实现AlexNet
2017/11/20 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
python实现简单飞行棋
2020/02/06 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
教师考核材料
2014/05/21 职场文书
优秀少先队员主要事迹材料
2014/05/28 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
创建绿色学校先进个人材料
2014/08/20 职场文书
2014年评职称工作总结
2014/11/20 职场文书
英语感谢信范文
2015/01/20 职场文书
公司车队管理制度
2015/08/04 职场文书
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android