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失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点 ...
随机推荐
- 从.net开发做到云原生运维(八)——DevOps实践
1. DevOps的一些介绍 DevOps(Development和Operations的组合词)是一组过程.方法与系统的统称,用于促进开发(应用程序/软件工程).技术运营和质量保障(QA)部门之间的 ...
- python matplotlib在mac os x 中如何显示中文,完美解决
一. 下载相关的中文字体 simhei 文件: 下载地址 二.通过以下代码查找matplotlib的数据存放位置: import matplotlib print(matplotlib.matplot ...
- HashMap中红黑树插入节点的调整过程
如果有对红黑树的定义及调整过程有过研究,其实很容易理解HashMap中的红黑树插入节点的调整过程. "红黑树定义及调整过程"的参考文章:<红黑树原理.查找效率.插入及变化规则 ...
- B+树能存多少数据?
B+树能存多少数据? 图 MySQL B+树示意图 InnoDB页的大小默认是16KB: 假设一条记录大小为1KB,则一个数据页中可以存16条数据(忽略页中的其他数据结构) 假设主键为int,又指针大 ...
- 8 种常见 SQL 错误用法
点击上方"开源Linux",选择"设为星标"回复"学习"获取独家整理的学习资料! 1.LIMIT 语句 分页查询是最常用的场景之一,但也通常 ...
- Keepalived入门学习
一个执着于技术的公众号 Keepalived简介 Keepalived 是使用C语言编写的路由热备软件,该项目软件起初是专门为LVS负载均衡设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后 ...
- MySQL字段约束条件、字段类型、存储引擎、配置文件
字符编码与配置文件 # 查看MySQL默认字符编码 \s ''' 如果是5.X系列 显示的编码有很多种 Latin1 gbk 如果是8.X系列 显示的统一是utf8mb4 utf8mb4是utf8优化 ...
- 这篇 DNS ,写的挺水的。
试想一个问题,我们人类可以有多少种识别自己的方式?可以通过身份证来识别,可以通过社保卡号来识别,也可以通过驾驶证来识别,尽管有多种识别方式,但在特定的环境下,某种识别方法会比其他方法更为适合.因特网上 ...
- opencv c++安装踩坑记录 file cannot create directory: /usr/local/include/opencv2. Maybe need administrative privileges
前言 最近深度学习Ultra-Fast-Lane-Detection/INSTALL.md at master · cfzd/Ultra-Fast-Lane-Detection (github.com ...
- (C++)读取一个输入的int型十进制数字的位数,并正序输出每个位上的值(不同数位的值用1个空格字符间隔)
1 /* 2 程序功能:读取一个输入的int型十进制数字的位数,并正序输出每个位上的值(不同数位的值用1个空格字符间隔). 3 例如:当输入985这个数字时,显示如下信息: 4 985是一个3位数字! ...