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 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
javascript 密码强弱度检测万能插件
Feb 25 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
May 01 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
js实现音频控制进度条功能
Apr 01 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
vue组件父子间通信详解(三)
Nov 07 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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获得当前的脚本网址
2007/12/10 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
让PHP更快的提供文件下载的代码
2012/06/13 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
js单例模式的两种方案
2013/10/22 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
2014/06/12 Javascript
jQuery Validate验证框架经典大全
2015/09/23 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
Vue中props的详解
2019/05/16 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
python3爬取各类天气信息
2018/02/24 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
python做接口测试的必要性
2019/11/20 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
建筑工程技术应届生自荐信
2013/09/27 职场文书
校园报刊亭创业计划书
2014/01/02 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫