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 相关文章推荐
xml 与javascript结合的问题解决方法
Mar 24 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
JavaScript严格模式详解
Nov 18 Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 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
咖啡与水的关系
2021/03/03 冲泡冲煮
php处理斐波那契数列非递归方法
2012/02/04 PHP
php反射应用示例
2014/02/25 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
如何让页面在打开时自动刷新一次让图片全部显示
2012/12/17 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
EditPlus中的正则表达式 实战(4)
2016/12/15 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
2017/10/26 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
Python使用shelve模块实现简单数据存储的方法
2015/05/20 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python在每个字符后添加空格的实例
2018/05/07 Python
学习python分支结构
2019/05/17 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Python for循环与getitem的关系详解
2020/01/02 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Numpy数组的广播机制的实现
2020/11/03 Python
flask框架中的cookie和session使用
2021/01/31 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
客房主管岗位职责
2013/12/09 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
2014年个人工作总结范文
2014/11/07 职场文书