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

本文实例讲述了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相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

(0)

相关推荐

  • 基于jQuery实现动态数字展示效果

    我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery实现动态数字展示效果. 查看演示 下载源码 HTML代码 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: <div class="count">当前在线:<span id="number"> &

  • jquery判断小数点两位和自动删除小数两位后的数字

    jquery判断小数点两位和自动删除小数两位后的数字 基本就是,输入12.235689741 会转换成12.23,不会四舍五入啦 会javascript基础的都应该能看明白啦 不解释 复制代码 代码如下: $("#fileds").find("input").blur(function(){ var value=$(this).val(); if(value == null || value == ''){ return false; } if(!isNaN(val

  • jQuery使用正则表达式限制文本框只能输入数字

    网站中的一个小功能:要求用户只能输入16位数字. 试过javascript的方法: 如:一种方法: //只允许输入数字 function checkkey2(value, e) { var key = window.event ? e.keyCode : e.which; if ((key > 95 && key < 106) || (key > 47 && key < 60)) { } else if (key != 8) { if (window

  • jquery限定文本框只能输入数字即整数和小数

    复制代码 代码如下: $(function(){ //文本框只能输入数字(不包括小数),并屏蔽输入法和粘贴 $.fn.integer= function() { $(this).css("ime-mode", "disabled"); this.bind("keypress",function(e) { var code = (e.keyCode ? e.keyCode : e.which); //兼容火狐 IE if(!$.browser.ms

  • 高效的jquery数字滚动特效

    本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下: 有分隔符,有小数点:<div class="numberRun"></div> <br><br> 只有分隔符:<div class="numberRun2"></div> <br><br> 只有小数点:<div class="numberRun3"&g

  • jQuery实现移动端滑块拖动选择数字效果

    本文为大家分享了基于jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字,供大家参考,具体内容如下 运行效果图: 实现代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="gb2312"> <title>demo</title> <link rel="stylesheet"

  • 基于jQuery实现文本框只能输入数字(小数、整数)

    在实际应用中,文本框中有时候只能够允许输入整数,但是有时候可能更为"博爱"一点,可以允许输入浮点数,下面就通过实例代码介绍一下如何利用jquery实现文本框只能输入小数,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/

  • Jquery数字上下滚动动态切换插件

    Jq打造的数字滚动插件,数字变化时,动态滚动切换,效果非常好. 我们先来看示例: CSS .textC { position:absolute; width:500px; overflow:hidden; margin-top: 100px; line-height:30px; margin-left: 300px; height:30px; } .textC span { color: #13BEEC; font-size: 28px; font-weight: bold; font-fami

  • jquery教程限制文本框只能输入数字和小数点示例分享

    复制代码 代码如下: $(function(){                 /*JQuery 限制文本框只能输入数字*/              $(".NumText").keyup(function(){                        $(this).val($(this).val().replace(/\D|^0/g,''));                  }).bind("paste",function(){  //CTR+V事

  • jquery限定文本框只能输入数字(整数和小数)

    本文实例介绍了jquery限定文本框只能输入数字的详细代码,分享给大家供大家参考,具体内容如下 先来一段规定文本框只能够输入数字包括小数的jQuery代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>我们</title> <script type="text/javascript" src="myte

  • jquery实现鼠标拖拽滑动效果来选择数字的方法

    本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • 利用jquery实现验证输入的是否是数字、小数,包含保留几位小数

    1.验证方法 validationNumber(e, num)  e代表标签对象,num代表保留小数位数 function validationNumber(e, num) { var regu = /^[0-9]+\.?[0-9]*$/; if (e.value != "") { if (!regu.test(e.value)) { alert("请输入正确的数字"); e.value = e.value.substring(0, e.value.length -

随机推荐