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();
        }
    }
  • 相关阅读:
    最长不下降子序列 从O(n)到O(nlogn)
    【NOIP1999】【洛谷P1020】导弹拦截
    【NOI2001】【洛谷P2024】食物链
    【2017中国大学生程序设计竞赛
    【2017中国大学生程序设计竞赛
    【NOIP】【洛谷P1029】最大公约数和最小公倍数问题
    【NOIP2009】【洛谷P1072】Hankson 的趣味题
    C++模板(2)
    Java中跳出循环的方法
    localeCompare() 方法实现中文的拼音排序
  • 原文地址:https://www.cnblogs.com/qq1445496485/p/14269617.html
Copyright © 2011-2022 走看看