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数字滚动特效
本文实例讲述了基于jquery数字滚动特效的代码,分为四种情况分享给大家供大家参考,具体如下: 有分隔符,有小数点:<div class="numberRun"></div> <br><br> 只有分隔符:<div class="numberRun2"></div> <br><br> 只有小数点:<div class="numberRun3"&g
-
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实现验证输入的是否是数字、小数，包含保留几位小数
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 -
-
基于jQuery实现动态数字展示效果
我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery实现动态数字展示效果. 查看演示 下载源码 HTML代码 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: <div class="count">当前在线:<span id="number"> &
-
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使用正则表达式限制文本框只能输入数字
网站中的一个小功能:要求用户只能输入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限定文本框只能输入数字（整数和小数）
本文实例介绍了jquery限定文本框只能输入数字的详细代码,分享给大家供大家参考,具体内容如下 先来一段规定文本框只能够输入数字包括小数的jQuery代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>我们</title> <script type="text/javascript" src="myte
-
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实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns