最近在写前端的时候,用到了oninput事件。(其中也涉及了onclick

问题:鼠标点击数字和运算符的时候,文本框里的内容到达一定长度时,会出现无法继续往后面跟随光标的问题。

input标签的事件之oninput事件

 

 

 

解决:见下面代码

这是HTML页面中的代码

<form name="calculator">
<input type="button" >

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

相关文章: