input輸入框的光標

上午的時候，以前一起配合Java后端的哥們問了個input光標的問題。

需求是這樣：只能輸入數字的input（一開始以為是輸入金額這些的，后來才曉得是用來填寫手機號）

他采用是直接百度來的如下方法：

<input type="text" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="this.value=this.value.replace(/\D/g,'')">

完成需求是可以的，在用戶體驗上面有點問題，光標會自動移到末尾，導致無法通過鍵盤控制光標前進，只能在中間插入一個字符。

這哥們以前就只管java那塊，js比我還水，所以讓我給他改改。

給了兩個方案：

一個是沿用之前的onkeyup；

<input type="text" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeyup="onkeyupFn(this,event)">

function onkeyupFn(t,event){
    var e = event || window.event;
    var c = e.keyCode;
    if (!(((c >= 48) && (c <= 57)) || ((c >= 96) && (c <= 105)) || c == 37 || c == 39 || c == 8)) {
        t.value=t.value.replace(/\D/g,'');
    }
}

 

或者也可以用onkeydown，直接阻止除數字、前進、后退、刪除以外的按鍵生效；

<input type="text" onafterpaste="this.value=this.value.replace(/\D/g,'')" onkeydown="onkeydownFn(event)">

function onkeydownFn(event){
    var e = event||window.event;
    var c = e.keyCode;
    if (!(((c >= 48) && (c <= 57)) ||((c >= 96) && (c <= 105)) || c == 37 || c== 39 || c== 8)){
        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    }
}