封裝成onlyNum()，onlyAlpha()和onlyNumAlpha()3個Jquery擴展方法，方便復用，由于里面一些JS代碼涉及到了"禁用輸入法，獲取剪切板的內容"，而"禁用輸入法，獲取剪切板的內容"只能在IE瀏覽器下才有效，對于別的瀏覽器是無效的，因此這三個方法只適合在IE瀏覽器下使用才有效

一、限制只能輸入數字

// ---------------------------------------------------------------------- // <summary> // 限制只能輸入數字 // </summary> // ---------------------------------------------------------------------- $.fn.onlyNum = function () {$(this).keypress(function (event) {var eventObj = event || e;var keyCode = eventObj.keyCode || eventObj.which;if ((keyCode >= 48 && keyCode <= 57))return true;elsereturn false;}).focus(function () {//禁用輸入法this.style.imeMode = 'disabled';}).bind("paste", function () {//獲取剪切板的內容var clipboard = window.clipboardData.getData("Text");if (/^\d+$/.test(clipboard))return true;elsereturn false;}); };

二、限制只能輸入字母

// ---------------------------------------------------------------------- // <summary> // 限制只能輸入字母 // </summary> // ---------------------------------------------------------------------- $.fn.onlyAlpha = function () {$(this).keypress(function (event) {var eventObj = event || e;var keyCode = eventObj.keyCode || eventObj.which;if ((keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))return true;elsereturn false;}).focus(function () {this.style.imeMode = 'disabled';}).bind("paste", function () {var clipboard = window.clipboardData.getData("Text");if (/^[a-zA-Z]+$/.test(clipboard))return true;elsereturn false;}); };

三、 限制只能輸入數字和字母

// ---------------------------------------------------------------------- // <summary> // 限制只能輸入數字和字母 // </summary> // ---------------------------------------------------------------------- $.fn.onlyNumAlpha = function () {$(this).keypress(function (event) {var eventObj = event || e;var keyCode = eventObj.keyCode || eventObj.which;if ((keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 97 && keyCode <= 122))return true;elsereturn false;}).focus(function () {this.style.imeMode = 'disabled';}).bind("paste", function () {var clipboard = window.clipboardData.getData("Text");if (/^(\d|[a-zA-Z])+$/.test(clipboard))return true;elsereturn false;}); };

使用方法：首先在畫面加載完成之后編寫如下的JS腳本

$(function () {// 限制使用了onlyNum類樣式的控件只能輸入數字$(".onlyNum").onlyNum();//限制使用了onlyAlpha類樣式的控件只能輸入字母$(".onlyAlpha").onlyAlpha();// 限制使用了onlyNumAlpha類樣式的控件只能輸入數字和字母$(".onlyNumAlpha").onlyNumAlpha();});

用戶永遠沒有機會去犯錯

?

$.fn.onlyNum = function () {$(this).focus(function () {this.value = this.value.replace(/\D/g, '');}).blur(function () {this.value = this.value.replace(/\D/g, '');}).bind("cut copy paste", function (e) {alert('此選項復制粘貼功能被禁用');e.preventDefault();});};// 限制使用了onlyNum類樣式的控件只能輸入數字$("#SearchDetail_TempProductId").onlyNum();

?

轉載于:https://www.cnblogs.com/shy1766IT/p/5185165.html

總結

以上是生活随笔為你收集整理的用Jquery控制文本框只能输入数字和字母及jquery自定义方法$.fn的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。