星期天上班真不知道干什么事哦,只好随便看看之前下载的电子书了,在看jQuery基础教程,里面看到一个小例子,拒绝非数字输入,觉得蛮好玩的,跟着那书上了例子把代码打了出来,可是在测试的时候却是有问题的,本来应该是只能输入数字的,可连英文字母都能输入,自己稍微改了一下。
html源码如下:
<!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 runat="server"> <title></title> <script src="js/jquery.pack.js" type="text/javascript"></script> <script src="js/JScript.js" type="text/javascript"></script> </head> <body> 只能输入数字的文本框:<input type="text" id="quantity" name="quantity" /> <span id="mes" style="color:#00f;"></span> </body> </html>
JScript.js源码如下:
$(function() { // 给文本框加个keypress,即键盘按下的时候判断 $("#quantity").keypress(function(event) { if (!$.browser.mozilla) { $("#mes").text("您按下的键值是: " + event.keyCode); if (event.keyCode && (event.keyCode < 48 || event.keyCode > 57)) { // ie6,7,8,opera,chrome管用 event.preventDefault(); } } else { $("#mes").text("您按下的键值是: " + event.charCode); if (event.charCode && (event.charCode < 48 || event.charCode > 57)) { // firefox管用 event.preventDefault(); } } }); });
要注意的就是我们是在文本框的keypress事件上编写代码,即键盘按下的时候我们就要做判断了。。
之所以要加判断是经本人测试,有些浏览器支持keyCode,有些浏览器支持charCode的,总之以上代码兼容IE6,7,8,oprea,firefox,chrome浏览器。
以上代码还有一个缺陷就是可以往文本框里输入中文的,请哪位高手帮忙改一下。。。呵呵。。。多谢了。。。
注:如果是要只能输入最多两位小数的正数的话则代码如下:
/* * 创建人:牛腩 * 说明:只能向文本框里输入数字,缺点是可以输入中文,所以还要在焦点失去的时候做个判断 */ $(function() { // 给文本框加个keypress,即键盘按下的时候判断 $("#ctl00_ContentPlaceHolder1_txtSumValue").keypress(function(event) { if (!$.browser.mozilla) { if (event.keyCode && (event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 46) { // ie6,7,8,opera,chrome管用 event.preventDefault(); } } else { if (event.charCode && (event.charCode < 48 || event.charCode > 57) && event.keyCode != 46) { // firefox管用 event.preventDefault(); } } }); // 当文本框失去焦点的时候,检测输入的是否是数字 $("#ctl00_ContentPlaceHolder1_txtSumValue").blur(function() { var input = $(this); var v = $.trim(input.val()); //alert("输入值:" + v); var reg = new RegExp("^[0-9]+(.[0-9]{2})?$", "g"); if (!reg.test(v)) { alert("请输入一个数字,最多只能有两位小数!"); input.val("0"); } }); });
1 楼
wangr15
2009-12-10
//屏蔽输入法 $(#ctl00_ContentPlaceHolder1_txtSumValue).css("ime-mode", "disabled"); //然后用jquery绑定一个paste事件,屏蔽粘贴。 $(#ctl00_ContentPlaceHolder1_txtSumValue).bind("paste", function() { //.... });