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 相关文章推荐
理解Javascript闭包
Nov 01 Javascript
Javascript的&amp;&amp;和||的另类用法
Jul 23 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
JavaScript实现select添加option
Jul 03 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
使用bat打开多个cmd窗口执行gulp、node
Feb 17 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
JS中cookie的使用及缺点讲解
May 13 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
在vue项目实现一个ctrl+f的搜索功能
Feb 28 Javascript
vue实现淘宝购物车功能
Apr 20 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 selectradio和checkbox默认选择的实现方法详解
2013/06/29 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
Add a Picture to a Microsoft Word Document
2007/06/15 Javascript
Textarea根据内容自适应高度
2013/10/28 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
微信小程序  http请求封装详解及实例代码
2017/02/15 Javascript
JavaScript数组迭代方法
2017/03/03 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
移动前端图片压缩上传的实例
2017/12/06 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python服务器与android客户端socket通信实例
2014/11/12 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
python 读取.csv文件数据到数组(矩阵)的实例讲解
2018/06/14 Python
python cs架构实现简单文件传输
2020/03/20 Python
Python unittest单元测试框架总结
2018/09/08 Python
python导入模块交叉引用的方法
2019/01/19 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2015年测量员工作总结
2015/05/23 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript