最近在写前端的时候,用到了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();
}
}

input标签的事件之oninput事件的更多相关文章

  1. input标签内容改变的触发事件

    ---恢复内容开始--- 1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发:onpropertychang ...

  2. input标签内容改变触发的事件

    原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data ...

  3. input标签内容改变时触发事件

    1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发: onpropertychange事件是实时触发,每增加 ...

  4. JS——input标签注册事件

    注意:淘宝的lable是用定位制作的,事件是oninput事件 <!DOCTYPE html> <html> <head lang="en"> ...

  5. 查看某个html标签有哪些属性和事件

    <html><head><script> //查看input标签有哪些属性和事件 function a() { var str = new String(" ...

  6. 【整合】input标签JS改变Value事件处理方法

    某人需要在时间控件给文本框赋值时,触发事件函数.实现的效果: 1.文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件.阻塞在于失去焦点后才触发(输入过程中不触发事件) 2.通过JS方法修改 ...

  7. input 标签和a标签实现超链接的区别

    a 标签和 input 标签都可以做链接点击的.代码: ------------------------------------------------------------------------ ...

  8. input 标签的监听事件总结

    最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状态,所以需要对所有 ...

  9. input标签的事件汇总

    我在做一个注册时用到了,在网上查的,比较碎.就汇总了下, 1.onfocus  当input 获取到焦点时触发 2.onblur  当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点 ...

随机推荐

  1. js实时监听dom尺寸变化

    开发过程中总会遇到dom节点尺寸变化,去做一些相应的逻辑,第一想到的应该是用$(window).resize()去做,但是这个是监听浏览器窗口的所以这个时候要用 ResizeObserver Resi ...

  2. HCIE笔记-第五节-IP地址+VLSM

    192.168.1.111 -- 点分十进制 -- IPV4地址表示格式 计算机 只能识别 01010101 二进制 4组十进制数 规则:二进制0/1 在不同位表达的含义是不一致的,0永远代表不取值, ...

  3. Java语言学习day25--7月31日

    今日内容介绍1.final 关键字2.static 关键字3.匿名对象4.内部类5.包的声明与访问6.访问修饰符7.代码块 ###01final关键字概念 * A: 概述 继承的出现提高了代码的复用性 ...

  4. element.insertAdjacentHTML

    一.概念 insertAdjacentHTML() 方法将指定的文本解析为 Element 元素,并将结果节点插入到DOM树中的指定位置.它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素 ...

  5. 0基础学习docker

    进入docker容器命令 docker exec -it 容器id bash 获取镜像 # 1.获取镜像,镜像托管仓库 docker search centos # 查询centos镜像 docker ...

  6. 通知:PostgreSQL证书申报退税请抓紧!

    2021年个税申报已于3月开始为了确保PostgreSQL证书能顺利退税中心特调研了学员中仅针对证书一项做退税申请没几天就得到结果2021年取得的PostgreSQL职业 技术证书确定可以退税!   ...

  7. B08. BootstrapBlazor实战 Menu 导航菜单使用(2)

    接上篇: B08. BootstrapBlazor实战 Menu 导航菜单使用(1) 3.项目模板 节省时间,直接使用 Bootstrap Blazor App 模板快速搭建项目 传送门: https ...

  8. XCTF练习题---MISC---适合作为桌面

    XCTF练习题---适合作为桌面 flag:flag{38a57032085441e7} 解题步骤: 1.观察题目,下载附件 2.拿到题目以后是一张图片,切换一下通道,发现一张二维码,使用QR进行翻译 ...

  9. HashMap中红黑树插入节点的调整过程

    如果有对红黑树的定义及调整过程有过研究,其实很容易理解HashMap中的红黑树插入节点的调整过程. "红黑树定义及调整过程"的参考文章:<红黑树原理.查找效率.插入及变化规则 ...

  10. AngularJS搭建环境

    一.搭建环境 1.1 调试工具:batarang Chrome浏览器插件 主要功能:查看作用域.输出高度信息.性能监控 1.2 依赖软件:Node.js 下载:https://nodejs.org/e ...