jQuery实现只允许输入数字和小数点的方法
更新时间：2016年03月02日 11:35:50 作者：yenange
这篇文章主要介绍了jQuery实现只允许输入数字和小数点的方法,涉及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程序设计有所帮助。
相关文章
jQuery/$ is not defined报错的几种解决方法
jQuery最常见的错误之一是$ is not defined错误,本文主要介绍了jQuery/$ is not defined报错的几种解决方法,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
这篇文章主要介绍了jQuery中even选择器的定义和用法,较为详细的分析了event选择器的语法结构与具体用法,并以一个设置偶数行为蓝色字体的例子总结了其用法与功能特点,需要的朋友可以参考下2014-12-12
当鼠标移动到图片上时，跟随鼠标显示放大显示的图片，具体效果情况截图，另附送源码，感兴趣的朋友可以学习下哈2013-06-06
这篇文章主要介绍了jquery实现删除一个元素后面的所有元素功能，操作简单方便，感兴趣的小伙伴们可以参考一下2015-12-12
很多新手朋友们都不知道jquery 中的each()怎么跳出循环，在each的回调函数中使用return false2014-05-05
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
本文将结合实例讲解如何使用一款基于jQuery的插件——Zclip来实现复制内容到剪贴板的功能。其实IE上有个方法可以实现点击复制，但是由于只是IE独有，所以我们不提倡。而Zclip是利用一个隐藏的flash文件来完成复制的功能，关键是它兼容当前各主流浏览器。2015-04-04
jQuery的最大特色之一就是方法连缀写法，这样的书写方式使得阅读起来更加方便。2010-06-06
这篇文章主要介绍了jQuery实现点击行选中或取消CheckBox的方法,涉及jQuery针对页面元素的循环遍历与属性操作相关技巧,需要的朋友可以参考下2016-08-08
jQuery Chart图表制作组件Highcharts用法详解
这篇文章主要介绍了jQuery Chart图表制作组件Highcharts用法,详细分析了Highcharts插件的功能与具体使用技巧及相关注意事项,需要的朋友可以参考下2016-06-06
本篇文章给大家介绍基于jquery实现仿百度百科右侧导航代码附源码下载，对百度百科右侧导航代码相关内容感兴趣的朋友可以参考下本文2015-11-11
最新评论