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();
    }
}