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 相关文章推荐
JS日历 推荐
Dec 03 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
Jquery 获取对象的几种方式介绍
Jan 17 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
May 16 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
vue 中directive功能的简单实现
Jan 05 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
Vue 实现拨打电话操作
Nov 16 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之第三天
2006/10/09 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
基于PHP-FPM进程池探秘
2017/10/17 PHP
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
Express的路由详解
2015/12/10 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
小程序实现发表评论功能
2018/07/06 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
python万年历实现代码 含运行结果
2017/05/20 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python unittest单元测试框架总结
2018/09/08 Python
Django--权限Permissions的例子
2019/08/28 Python
Pytest mark使用实例及原理解析
2020/02/22 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
国培计划培训感言
2014/03/11 职场文书
2014年团队工作总结
2014/11/24 职场文书
在职证明格式样本
2015/06/15 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书
2019 入党申请书范文
2019/07/10 职场文书
vue 实现上传组件
2021/05/31 Vue.js
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python