jQuery实现只允许输入数字和小数点的方法


Posted in Javascript onMarch 02, 2016

本文实例讲述了jQuery实现只允许输入数字和小数点的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//示例代码:
//只允许输入数字与.:<input type="text" name="test" id="test" onkeydown="checkKeyForFloat(this.value,event)" style="ime-mode: disabled" />
//只允许输入数字 :<input type="text" name="test2" id="test2" onkeydown="checkKeyForNum(this.value,event)" style="ime-mode: disabled" />
//只允许输入数字与小数点
function checkKeyForFloat(value, e) {
 var isOK = false;
 var key = window.event ? e.keyCode : e.which;
 if ((key > 95 && key < 106) || //小键盘上的0到9
 (key > 47 && key < 60) || //大键盘上的0到9
 (key == 110 && value.indexOf(".") < 0) || //小键盘上的.而且以前没有输入.
 (key == 190 && value.indexOf(".") < 0) || //大键盘上的.而且以前没有输入.
 key == 8 || key == 9 || key == 46 || key == 37 || key == 39 //不影响正常编辑键的使用(8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
) {
  isOK = true;
 } else {
  if (window.event) //IE
  {
   e.returnValue = false; //event.returnValue=false 效果相同.
  }
  else //Firefox
  {
   e.preventDefault();
  }
 }
 return isOK;
}
//只允许输入数字
function checkKeyForInt(value, e) {
 var isOK = false;
 var key = window.event ? e.keyCode : e.which;
 if ((key > 95 && key < 106) || //小键盘上的0到9
 (key > 47 && key < 60) || //大键盘上的0到9
 key == 8 || key == 9 || key == 46 || key == 37 || key == 39 //不影响正常编辑键的使用(8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
) {
  isOK = true;
 } else {
  if (window.event) //IE
  {
   e.returnValue = false; //event.returnValue=false 效果相同.
  }
  else //Firefox
  {
   e.preventDefault();
  }
 }
 return isOK;
}
//设置有自定义属性 dtype 的文本框 允许输入的范围
function setDType() {
 $(":text[dtype]").each(function () {
  var dtype = $(this).attr("dtype");
  var isOK = true;
  switch (dtype) {
   case "number":
    $(this).css("ime-mode", "disabled").keydown(function (event) {
     isOK = checkKeyForFloat($(this).val(), event);
     if (!isOK) {
      //$(this).SuperFocus("", 500);
     }
     return isOK;
    });
    break;
   default:
    break;
  }
 });
}
</script>
<script type="text/javascript">
$(function () {
 setDType();
});
</script>
</head>
<body>
年龄: <input type="text" maxlength="3" onkeydown="checkKeyForInt(this.value,event)" style="ime-mode: disabled"/><br />
身高:<input type="text" maxlength="5" dtype="number" />
</body>
</html>

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

Javascript 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
优化Jquery,提升网页加载速度
Nov 14 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
May 22 Javascript
javascript Deferred和递归次数限制实例
Oct 21 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
详解VUE前端按钮权限控制
Apr 26 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
Mar 02 #Javascript
javascript求日期差的方法
Mar 02 #Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 #Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 #Javascript
js实现不重复导入的方法
Mar 02 #Javascript
基于JavaScript实现智能右键菜单
Mar 02 #Javascript
JS简单实现String转Date的方法
Mar 02 #Javascript
You might like
PHP原生函数一定好吗?
2014/12/08 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
Postman环境变量全局变量使用方法详解
2020/08/13 Javascript
[09:33]2015国际邀请赛第四日TOP10
2015/08/08 DOTA
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python的多维空数组赋值方法
2018/04/13 Python
python判断设备是否联网的方法
2018/06/29 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Python 读取有公式cell的结果内容实例方法
2020/02/17 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
HTML5 解析规则分析
2009/08/14 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
企业管理毕业生求职信
2014/03/11 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
致运动员加油稿
2015/07/21 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书