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();
}
}
input标签的事件之oninput事件的更多相关文章
- input标签内容改变的触发事件
---恢复内容开始--- 1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发:onpropertychang ...
- input标签内容改变触发的事件
原生方法 onchange事件 <input type="text" onchange="onc(this)"> function onc(data ...
- input标签内容改变时触发事件
1. onchange事件与onpropertychange事件的区别: onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发: onpropertychange事件是实时触发,每增加 ...
- JS——input标签注册事件
注意:淘宝的lable是用定位制作的,事件是oninput事件 <!DOCTYPE html> <html> <head lang="en"> ...
- 查看某个html标签有哪些属性和事件
<html><head><script> //查看input标签有哪些属性和事件 function a() { var str = new String(" ...
- 【整合】input标签JS改变Value事件处理方法
某人需要在时间控件给文本框赋值时,触发事件函数.实现的效果: 1.文本框支持手工输入,通过用户输入修改值,手工输入结束后触发事件.阻塞在于失去焦点后才触发(输入过程中不触发事件) 2.通过JS方法修改 ...
- input 标签和a标签实现超链接的区别
a 标签和 input 标签都可以做链接点击的.代码: ------------------------------------------------------------------------ ...
- input 标签的监听事件总结
最近在写一个手机端提交表单的项目,里面用了不少input标签,因为项目不太忙,所以,想做的完美点,但是遇到了一些问题,比如:页面中的必填项如果有至少一项为空,提交按钮就是不能提交的状态,所以需要对所有 ...
- input标签的事件汇总
我在做一个注册时用到了,在网上查的,比较碎.就汇总了下, 1.onfocus 当input 获取到焦点时触发 2.onblur 当input失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点 ...
随机推荐
- SimpleDateFormat类的安全问题,这6个方案总有一个适合你
摘要:你使用的SimpleDateFormat类还安全吗?为什么说SimpleDateFormat类不是线程安全的?带着问题从本文中寻求答案. 本文分享自华为云社区<[高并发]SimpleDat ...
- DOS攻击(一)
DOS攻击(一) 介绍 DoS是Denial of Service的简称,即拒绝服务,造成DoS的攻击行为被称为DoS攻击,其目的是使计算机或网络无法提供正常的服务.最常见的DoS攻击有计算机网络带宽 ...
- IDEA SpringBoot-Mybatis-plus 实现增删改查(CRUD)
上一篇: IDEA SpringBoot-Mybatis实现增删改查(CRUD) 下一篇:Intellij IDEA 高效使用教程 (插件,实用技巧) 最好用的idea插件大全 一.前言 Mybati ...
- Java课程课堂作业代码
前言 本文章只是单纯记录课堂老师布置的课堂作业代码,题目都比较简单,所以没有写解题思路,相信大家都能理解,当然其中有的解法和代码不是最优的,当时只是为了完成题目,后来也懒得改了,如果有不恰当或者不正确 ...
- Git 后续——分支与协作
Git 后续--分支与协作 本文写于 2020 年 9 月 1 日 之前一篇文章写了 Git 的基础用法,但那其实只是「单机模式」,Git 之所以在今天被如此广泛的运用,是脱不开分支系统这一概念的. ...
- zabbix 线路质量监控自定义python模块(Mysql版),多线程(后来发现使用协程更好)降低系统消耗
之前零零碎碎写了一些zabbix 线路监控的脚本,工作中agnet较多,每条线路监控需求不一致,比较杂乱,现在整理成一个py模块,集合之前的所有功能 环境 python3.6以上版本,pip3(pip ...
- MinGW 和 TDM 的问题
目前遇到的一个小问题就是批量声明时的初始化. mingw gcc 9.2:不支持int a,b,c=5; 所得数为a=0 b=0 c=5. 而在TDM gcc 5.1中,可以同时赋值. 第二个问题,T ...
- pymysql.err.OperationalError: (1054, "Unknown column 'aa' in 'field list'")(已解决)
错误描述: 今天使用python连接mysql数据库进行数据添加时,出现报错"pymysql.err.OperationalError: (1054, "Unknown colum ...
- python之装饰器补充与递归函数与二分查找
目录 多层装饰器 有参装饰器 递归函数 基本演示 斐波那契数列 总结 小拓展 算法之二分法 简介 举例 总结 多层装饰器 我们已经知道了语法糖的作用是将装饰对象自动装饰到装饰器中,一个语法糖的应用我们 ...
- Fail2ban 运维管理 服务控制
启动监禁 启动所有或者单个监禁项目. # 语法:fail2ban-client start [监禁名称] root@ubuntu:~# fail2ban-client start sshd 停止监禁 ...