hyljava

          jquery校驗輸入框內容

          用Jquery控制文本框只能輸入數字和字母

            在公司開發WinForm項目時,發現公司自主研發的textbox控件非常強大,可以實現"只能輸入數字"、"只能輸入字母"和"只能輸入數字和字母"的三種輸入限制,這樣就可以精確控制用戶輸入的內容范圍,讓"用戶永遠沒有辦法輸入限定的內容范圍之外的其他內容",也就是"用戶即使想犯錯誤也沒有機會",這種限制控件輸入的方式給了我很大的啟發,如果在web項目中也能做到這樣的精確控制,那么就可以避免因為一些非法輸入而造成系統出錯,既然WinForm里面可以實現這樣的控件,那么web項目里面也應該有辦法去實現類似這樣的控件或者能夠做到類似的效果,經過自己的一番研究和查找資料,終于做到了類似的效果,針對"只能輸入數字"、"只能輸入字母"和"只能輸入數字和字母"的三種輸入限制,我封裝成onlyNum(),onlyAlpha()和onlyNumAlpha()3個Jquery擴展方法,方便復用,由于里面一些JS代碼涉及到了"禁用輸入法,獲取剪切板的內容",而"禁用輸入法,獲取剪切板的內容"只能在IE瀏覽器下才有效,對于別的瀏覽器是無效的,因此這三個方法只適合在IE瀏覽器下使用才有效,三個方法的代碼如下

          一、限制只能輸入數字

          復制代碼
           1 // ----------------------------------------------------------------------
           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>

          這樣畫面上凡是設置了class="onlyNum"的控件就只能輸入數字,設置了class="onlyAlpha"的控件只能輸入字母,設置了class="onlyNumAlpha"的控件只能輸入數字和字母,通過這種方式就可以限制了用戶的輸入范圍,避免用戶進行一些非法的輸入。

            在我看來,這種限制控件輸入的方式是比較好的一種方式,可以避免用戶犯錯,平時傳統的做法都是用戶輸入了非法字符后,我們再彈出一個消息框告訴用戶輸入了非法字符,這種方式就是"用戶已經做了,我們才告訴用戶不能這么做",而上面的那種方式是卻能讓用戶只能輸入我們指定范圍內的字符,讓"用戶永遠沒有機會去犯錯"。

            

            寫這篇文章既是對我自己學習的一個總結,也希望能夠對一些初學者朋友們有一定的幫助,以上文章內容如果有寫得不對的地方,歡迎廣大朋友指正,我感激不盡!,另外,如果有朋友有辦法在火狐和google下也能夠禁用輸入法和獲取剪切板的內容的,也希望能夠告知我一下,感激不盡!

          posted on 2015-05-08 11:22 何云隆 閱讀(446) 評論(0)  編輯  收藏 所屬分類: JSJsp

          主站蜘蛛池模板: 嘉荫县| 莲花县| 克什克腾旗| 北安市| 阜阳市| 枣强县| 资中县| 宿州市| 盈江县| 抚宁县| 福州市| 平果县| 华阴市| 武清区| 南陵县| 南阳市| 织金县| 太原市| 邵阳县| 营山县| 深圳市| 中山市| 宜都市| 汝南县| 绩溪县| 南投县| 同仁县| 阳江市| 铜鼓县| 囊谦县| 宁都县| 兴和县| 合江县| 仪征市| 临夏市| 十堰市| 双流县| 万山特区| 台州市| 霞浦县| 临泉县|