zoukankan      html  css  js  c++  java
  • 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();
        }
    }
  • 相关阅读:
    20145313张雪纯 《Java程序设计》第7周学习总结
    20145313第二次实验
    20145313Java第一次实验
    20145313张雪纯 《Java程序设计》第6周学习总结
    RocEDU.阅读.写作《霍乱时期的爱情》书摘(三)
    20145313张雪纯 《Java程序设计》第5周学习总结
    RocEDU.阅读.写作《霍乱时期的爱情》书摘(二)
    20145313张雪纯 《Java程序设计》第4周学习总结
    RocEDU.阅读.写作《霍乱时期的爱情》书摘(一)
    20145310 GDB调试汇编堆栈分析
  • 原文地址:https://www.cnblogs.com/qq1445496485/p/14269617.html
Copyright © 2011-2022 走看看