input標簽的事件之oninput事件

最近在寫前端的時候，用到了oninput事件。（其中也涉及了onclick）

問題：鼠標點擊數字和運算符的時候，文本框里的內容到達一定長度時，會出現無法繼續往后面跟隨光標的問題。

 

 

 

解決：見下面代碼

這是HTML頁面中的代碼

<form name="calculator">
   <input type="button" id="clear" class="btn other" value="C" onclick="clearNum();">
   <input type="text" id="display" oninput="setCss()">
   <br>

   <input type="button" class="btn calculator-number" value="7" onclick="get(this.value);">
   <input type="button" class="btn calculator-number" value="8" onclick="get(this.value);">
   <input type="button" class="btn calculator-number" value="9" onclick="get(this.value);">
   <input type="button" class="btn operator" value="+" onclick="get(this.value);">
   <br>

   <input type="button" class="btn calculator-number" value="4" onclick="get(this.value);">
   <input type="button" class="btn calculator-number" value="5" onclick="get(this.value);">
   <input type="button" class="btn calculator-number" value="6" onclick="get(this.value);">
   <input type="button" class="btn operator" value="*" onclick="get(this.value);">
   <br>

   <input type="button" class="btn calculator-number" value="1" onclick="get(this.value);">
   <input type="button" class="btn calculator-number" value="2" onclick="get(this.value);">
   <input type="button" class="btn calculator-number" value="3" onclick="get(this.value);">
   <input type="button" class="btn operator" value="-" onclick="get(this.value);">
   <br>

   <input type="button" class="btn calculator-number" value="0" onclick="get(this.value);">
   <input type="button" class="btn operator" value="." onclick="get(this.value);">
   <input type="button" class="btn operator" value="/" onclick="get(this.value);">
   <input type="button" class="btn other" value="=" onclick="calculates();">

</form>

 

這是JS中的代碼

//獲取對應按鈕的值 數字和運算符
function get(value) {
    document.getElementById('display').value += value;
    setCss();
}

//計算
function calculates() {
    var result = 0;
    result = document.getElementById('display').value;
    clearNum();
    document.getElementById('display').value = eval(result);
}

//獲取當前文本框內的長度
function setCss() {
    var sr=document.getElementById("display");
    var len=sr.value.length;
    setSelectionRange(sr,len,len); //將光標定位到文本最后
}

function setSelectionRange(input, selectionStart, selectionEnd) {
    if (input.setSelectionRange) {
        input.focus();
        input.setSelectionRange(selectionStart, selectionEnd);
    }
    else if (input.createTextRange) {
        var range = input.createTextRange();
        range.collapse(true);
        range.moveEnd('character', selectionEnd);
        range.moveStart('character', selectionStart);
        range.select();
    }
}