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失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点 ...
随机推荐
- (2020行人再识别综述)Person Re-Identification using Deep Learning Networks: A Systematic Review
目录 1.引言 2.研究方法 2.1本次综述的贡献 2.2综述方法 2.3与现有综述的比较 3.行人再识别基准数据集 3.1基于图像的再识别数据集 3.2基于视频的再识别数据集 4.基于图像的深度再识 ...
- 2021.11.04 P1392 取数(多路归并)
2021.11.04 P1392 取数(多路归并) P1392 取数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题意: 在一个n行m列的数阵中,你须在每一行取一个数(共n个数) ...
- 2021.07.19 P2624 明明的烦恼(prufer序列,为什么杨辉三角我没搞出来?)
2021.07.19 P2624 明明的烦恼(prufer序列,为什么杨辉三角我没搞出来?) [P2624 HNOI2008]明明的烦恼 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn ...
- Linux:文件解压、复制和移动的若干坑
Linux下进行文件的解压.复制.移动应该是最常见的操作了.尤其是我们在项目中使用大量的数据集文件(比如机器学习)时.然而使用这些命令时一不留神就会掉进坑里,这篇文章我们就来细数用Shell进行文件操 ...
- Python学习笔记: pip install 常见错误汇总
本机环境RHEL8, Python3.9 pip install: 无法安装最新版本的包 在pypi上查看pkg的页面,因为有些pip包的版本对特定的python版本有要求 pip install e ...
- DFA算法之内容敏感词过滤
DFA 算法是通过提前构造出一个 树状查找结构,之后根据输入在该树状结构中就可以进行非常高效的查找. 设我们有一个敏感词库,词酷中的词汇为:我爱你我爱他我爱她我爱你呀我爱他呀我爱她呀我爱她啊 那么就可 ...
- hibernate查询不到关联对象列表-fetchType的选择
概述 昨天排查问题的时候,发现使用hibernate关联对象时,订单实体类对象死活无法获取关联的订单明细列表 Order order = orderDao.findById(201L); //明明数据 ...
- 攻防世界-MISC:pdf
这是攻防世界新手练习区的第二题,题目如下: 点击附件1下载,打开后发现是一个pdf文件,里面只有一张图片 用WPS打开,没发现有什么不对的地方,参考一下WP,说是要转为word格式.随便找一个在线转换 ...
- 数据结构_C语言_单链表
# include <stdio.h> # include <stdbool.h> # include <malloc.h> typedef int DataTyp ...
- vue - vue基础/vue核心内容(终结篇)
今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...