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

前端技术 2023/09/07 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/19683

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案