js 只允許 輸入數字

來源:互聯網
上載者:User

原文章在:http://www.cnblogs.com/ly5201314/archive/2009/03/04/1402993.html

寫得很不錯,實用,可以自己修改一下擴充相關功能:

為瞭解決只能輸入數位問題,網上有許多資料,現歸攏一下。
一、不帶負號的輸入
這裡,沒有解決“加號或減號”的問題。
由於“加號或減號”必須出現在數位最前端,因此,必須要判斷當前游標所在的位置是否在輸入文字框的首位。

<!--//調用方式:onkeydown = "DigitInput(this,event);"function DigitInput(el,ev) {//8:退格鍵、46:delete、37-40: 方向鍵//48-57:小鍵盤區的數字、96-105:主鍵盤區的數字//110、190:小鍵盤區和主鍵盤區的小數//189、109:小鍵盤區和主鍵盤區的負號    var event = ev || window.event;                             //IE、FF下擷取事件對象    var currentKey = event.charCode||event.keyCode;             //IE、FF下擷取鍵盤碼        //小數點處理    if (currentKey == 110 || currentKey == 190) {        if (el.value.indexOf(".")>=0)             if (window.event)                       //IE                event.returnValue=false;                 //e.returnValue = false;效果相同.            else                                    //Firefox                event.preventDefault();    } else         if (currentKey!=8 && currentKey != 46 && (currentKey<37 || currentKey>40) && (currentKey<48 || currentKey>57) && (currentKey<96 || currentKey>105))            if (window.event)                       //IE                event.returnValue=false;                 //e.returnValue = false;效果相同.            else                                    //Firefox                event.preventDefault();}-->

二、帶負號的輸入
  判斷帶負號的輸入,則必須要知道游標的位置,也就是說,只有當游標在最前端時,負號才有效。

<!--//調用方式:onkeydown = "DigitInput(this,event);"function DigitInput(el,ev) {//8:退格鍵、46:delete、37-40: 方向鍵//48-57:小鍵盤區的數字、96-105:主鍵盤區的數字//110、190:小鍵盤區和主鍵盤區的小數//189、109:小鍵盤區和主鍵盤區的負號    var event = ev || window.event;                             //IE、FF下擷取事件對象    var currentKey = event.charCode||event.keyCode;             //IE、FF下擷取鍵盤碼        //小數點處理    if (currentKey == 110 || currentKey == 190) {        if (el.value.indexOf(".")>=0)             if (window.event)                       //IE                event.returnValue=false;                 //e.returnValue = false;效果相同.            else                                    //Firefox                event.preventDefault();    } else        //負號處理        if (currentKey == 189 || currentKey == 109) {            if (getPosition(el)>0 || el.value.indexOf("-")>=0)                if (window.event)                       //IE                    event.returnValue=false;                 //e.returnValue = false;效果相同.                else                                    //Firefox                    event.preventDefault();        } else        if (currentKey!=8 && currentKey != 46 && (currentKey<37 || currentKey>40) && (currentKey<48 || currentKey>57) && (currentKey<96 || currentKey>105))            if (window.event)                       //IE                event.returnValue=false;                 //e.returnValue = false;效果相同.            else                                    //Firefox                event.preventDefault();}/**  * 擷取游標所在的字元位置  * @param obj 要處理的控制項, 支援文本域和輸入框  * @author hotleave  */function getPosition(obj){    var result = 0;    if(obj.selectionStart){ //非IE瀏覽器        result = obj.selectionStart    }else{                  //IE        var rng;        if(obj.tagName == "TEXTAREA"){ //如果是文本域            rng = event.srcElement.createTextRange();            rng.moveToPoint(event.x,event.y);        }else{                         //輸入框            rng = document.selection.createRange();        }        rng.moveStart("character",-event.srcElement.value.length);        result = rng.text.length;    }    return result;}-->

getPosition(obj)函數,是一個擷取游標位置的通用函數。
為了減少傳入的參數,事件對象是可以通過事件擷取的:

var el = window.event.srcElement||ev.target;

只需將傳DigitInput(el,ev)的第一句加上上面這條語句,並且將傳入參數只有ev一個即可,這樣,減少了傳入值。
三、擴充
  我們可以增加一個傳入的參數值,用於限定允許輸入的數字條件:
1:允許正整數;2、允許正小數;3、允許負整數;4、允許負小數。
當然,傳入一個Regex也可以實現。

function onlyNum() {   if(!( (event.keyCode >= 48 && event.keyCode<=57 )        ||( event.keyCode >= 96 && event.keyCode <= 105 )        || ( event.keyCode == 8 )   //退格        || ( event.keyCode == 46 ) //Del        || ( event.keyCode == 27 ) //ESC        || ( event.keyCode == 37 ) //左        || ( event.keyCode == 39 ) //右        || ( event.keyCode == 16 ) //shift        || ( event.keyCode == 9 ) //Tab       )    ) //考慮小鍵盤上的數字鍵     event.returnValue=false; } 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.