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失去焦点时触发,注意:这个事件触发的前提是已经获取了焦点 ...
随机推荐
- AcWing 【算法提高课】笔记02——搜索
搜索进阶 22.4.14 (PS:还有 字串变换 A*两题 生日蛋糕 回转游戏 没做) 感觉暂时用不上 BFS 1. Flood Fill 在线性时间复杂度内,找到某个点所在的连通块 思路 统计连通块 ...
- (十一)React Ant Design Pro + .Net5 WebApi:后端环境搭建-IdentityServer4(三)持久化
一.前言 IdentityServer配合EFCore持久化,框架已经为我们准备了两个上下文: ConfigurationDbContext:配置数据(资源.客户端.身份等) PersistedGra ...
- Jx.Cms开发笔记(四)-改造Card组件
在Blazor 组件库 BootstrapBlazor 中Card组件介绍中我们说过,如果我们使用了Card组件的IsCollapsible属性设置了可伸缩的话,就只能使用Text属性来设置标题文本, ...
- python黑帽子(第二章)
TCP客户端 在渗透测试工程中,我们经常会遇到需要创建一个TCP客户端来连接网络.发送垃圾数据.进行模糊测试等任务的情况.但是所处环境不具备丰富的网络工具,下面是一个简单的TCP客户端 import ...
- struts2绕过waf读写文件及另类方式执行命令
之前碰到过好几次Struts2,还都是016,项目.众测都遇到过,每次都只是证明了一下存在,由于waf的存在,没有深入去利用,这里简单的记录下. 0x01 背景 xray或者Struts2漏扫可以扫到 ...
- XCTF练习题---MISC---Excaliflag
XCTF练习题---MISC---Excaliflag flag:3DS{Gr4b_Only_th1s_B1ts} 解题步骤: 1.观察题目,下载附件 2.拿到手以后是一张图片,话不多说,直接上Ste ...
- XCTF练习题---CRYPTO---safer-than-rot13
XCTF练习题---CRYPTO---safer-than-rot13 flag:no_this_is_not_crypto_my_dear 解题步骤: 1.观察题目,下载附件 2.打开后发现是个文件 ...
- SpringJdbcTemplate简单实现
SpringJdbcTemplate 配置文件 1.依赖坐标 <dependencies> <dependency> <groupId>javax.servlet& ...
- 前端面试 -HTTP系列
http和https 的区别? 端口 经济 安全性 响应速度 http 80端口 不需要 明文传输,安全性差 页面响应速度快,使用tcp的3次握手 https 443端口 费钱SSL需要ca 证书 S ...
- 太极限了,JDK的这个BUG都能被我踩到
hello,大家好呀,我是小楼. 之前遇到个文件监听变更的问题,刚好这周末有空研究了一番,整理出来分享给大家. 从一次故障说起 我们还是从故障说起,这样更加贴近实际,也能让大家更快速理解背景. 有一个 ...