Jquery限制文本框输入

引用 :http://www.cnblogs.com/xdp-gacl/p/3467245.html

// ----------------------------------------------------------------------
 2 // <summary>
 3 // 限制只能输入数字
 4 // </summary>
 5 // ----------------------------------------------------------------------
 6 $.fn.onlyNum = function () {
 7     $(this).keypress(function (event) {
 8         var eventObj = event || e;
 9         var keyCode = eventObj.keyCode || eventObj.which;
10         if ((keyCode >= 48 && keyCode <= 57))
11             return true;
12         else
13             return false;
14     }).focus(function () {
15     //禁用输入法
16         this.style.imeMode = ‘disabled‘;
17     }).bind("paste", function () {
18     //获取剪切板的内容
19         var clipboard = window.clipboardData.getData("Text");
20         if (/^\d+$/.test(clipboard))
21             return true;
22         else
23             return false;
24     });
25 };

二、限制只能输入字母

 1 // ----------------------------------------------------------------------
 2 // <summary>
 3 // 限制只能输入字母
 4 // </summary>
 5 // ----------------------------------------------------------------------
 6 $.fn.onlyAlpha = function () {
 7     $(this).keypress(function (event) {
 8         var eventObj = event || e;
 9         var keyCode = eventObj.keyCode || eventObj.which;
10         if ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))
11             return true;
12         else
13             return false;
14     }).focus(function () {
15         this.style.imeMode = ‘disabled‘;
16     }).bind("paste", function () {
17         var clipboard = window.clipboardData.getData("Text");
18         if (/^[a-zA-Z]+$/.test(clipboard))
19             return true;
20         else
21             return false;
22     });
23 };

三、 限制只能输入数字和字母

 1 // ----------------------------------------------------------------------
 2 // <summary>
 3 // 限制只能输入数字和字母
 4 // </summary>
 5 // ----------------------------------------------------------------------
 6 $.fn.onlyNumAlpha = function () {
 7     $(this).keypress(function (event) {
 8         var eventObj = event || e;
 9         var keyCode = eventObj.keyCode || eventObj.which;
10         if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))
11             return true;
12         else
13             return false;
14     }).focus(function () {
15         this.style.imeMode = ‘disabled‘;
16     }).bind("paste", function () {
17         var clipboard = window.clipboardData.getData("Text");
18         if (/^(\d|[a-zA-Z])+$/.test(clipboard))
19             return true;
20         else
21             return false;
22     });
23 };

调用方法:首先在画面加载完成之后编写如下的JS脚本

1 $(function () {
2     // 限制使用了onlyNum类样式的控件只能输入数字
3     $(".onlyNum").onlyNum();
4     //限制使用了onlyAlpha类样式的控件只能输入字母
5     $(".onlyAlpha").onlyAlpha();
6     // 限制使用了onlyNumAlpha类样式的控件只能输入数字和字母
7     $(".onlyNumAlpha").onlyNumAlpha();
8    });

对需要做输入控制的控件设置class样式

1  <ul>
2         <li>只能输入数字:<input type="text" class="onlyNum" /></li>
3         <li>只能输入字母:<input type="text" class="onlyAlpha" /></li>
4         <li>只能输入数字和字母:<input type="text" class="onlyNumAlpha" /></li>
5  </ul>
时间: 2024-08-03 01:49:11

Jquery限制文本框输入的相关文章

Jquery实现文本框输入提示

一些用户体验好的表单都会在文本框里设置输入提示,文本框获取焦点时,提示内容消息,如果未输入,失去焦点时又会出现提示. 网上找到一个比较好用的控件jquery.inputDefault.js 使用方法: 1.在jsp页面引用jquery.inputDefault.js <script src="/js/jquery.inputDefault.js" type="text/javascript"></script> 2.需要为控件增加一个自定义属

Jquery 限制文本框输入字数【转】

<script type="text/javascript" src="js/jquery.min.js" ></script> <div class="right"> <p> <textarea id="caseContent" name="caseContent" maxlength="200" class="area&

jquery限制文本框输入字符长度

js代码: jQuery.fn.maxLength = function(max){ this.each(function(){ var type = this.tagName.toLowerCase(); var inputType = this.type? this.type.toLowerCase() : null; if(type == "input" && inputType == "text" || inputType == "

用Jquery控制文本框只能输入数字和字母

只为成功找方法,不为失败找借口! 用Jquery控制文本框只能输入数字和字母 在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"."只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,

jquery限制文本框只能输入数字、JQuery 限制文本框只能输入数字和小数点

/*JQuery 限制文本框只能输入数字及小数点 */ <script> $(function(){ /*JQuery 限制文本框只能输入数字*/ $("#id").keyup(function(){ $(this).val($(this).val().replace(/\D|^0/g,'')); }).bind("paste",function(){  //CTR+V事件处理 $(this).val($(this).val().replace(/\D|

jQuery实现TEXT文本框输入时的提示信息(谷歌百度淘宝搜索框提示实现)

在搜索框中,输入之前框内有输入的提示信息,文本框获得焦点后会自动消失的效果,效果图如下: 鼠标放在文本框时的效果: 创建工具类(已经存在就不用创建了)Util.js(DWR的JS) 在里面添加如下方法: Js代码 /** * Input框里的灰色提示,使用前先引入jquery * <br>使用方法:<input type="text" tipMsg="您的用户名"   /> * * @return */ function inputTipTe

jquery 限制文本框只能输入数字

1 $("input[name='searchBean.con1']").keyup(function(){ //keyup事件处理 2 $(this).val($(this).val().replace(/\D|^0/g,'')); 3 }).bind("paste",function(){ //CTR+V事件处理 4 $(this).val($(this).val().replace(/\D|^0/g,'')); 5 }).css("ime-mode&

JQuery限制文本框只能输入数字和小数点的方法

<input type="text" class="txt NumText"  Width="100px"  /> $(function(){ /*JQuery 限制文本框只能输入数字*/ $(".NumText").keyup(function(){ $(this).val($(this).val().replace(/D|^0/g,'')); }).bind("paste",function

jQuery实现限制input框 textarea文本框输入字符数量的方法

<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery实现限制input框 textarea文本框输入字符数量的方法</title> </head> <script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script>&l