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();
        }
    }
  • 相关阅读:
    Vue Errors
    npm学习笔记二
    npm安装package.json文件中的模块依赖
    浅析对浏览器内核的理解
    JavaScript中的匿名函数、立即执行函数和闭包
    ECMAScript中的函数
    JavaScript中的构造函数
    如何配置Tomcat上web.xml让浏览器能直接下载txt,xml类型文件
    Caused by: java.sql.SQLException: GC overhead limit exceeded处理百万数据出现的异常
    第3篇 Scrum 冲刺博客(专✌️团队)
  • 原文地址:https://www.cnblogs.com/qq1445496485/p/14269617.html
Copyright © 2011-2022 走看看