关于input文本框，设置为readonly后，onchage事件无响应处理方案

最新推荐文章于 2023-12-07 09:42:29 发布
原创 最新推荐文章于 2023-12-07 09:42:29 发布 · 7.2k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #onchange事件

本文探讨了在将输入文本框设置为readonly属性后，jQuery绑定的onchange事件无法正常触发的问题。通过采用原生JavaScript的方法，成功实现了事件的监听与处理。

input文本框，设置为readonly后，由于onchage事件是当文本框失去焦点后才会触发的，所以导致使用jq绑定事件无效。

处理方式使用原生js获取到文本框，document.inuptName.onchange = function (){ alert('onchange 事件触发')}。

Django Form设置文本框为readonly操作
09-16
当需要在前端展示信息但不允许用户修改时，我们可以将文本框设置为只读（readonly）。本文将详细介绍如何在Django Form中实现这一功能，并提供两种不同的方法。 方法一是在自定义的form类中通过`__init__()`方法来...
捕获input文本框内容改变事件的js代码
12-10
网上一位老兄采用如此方法： readonly :是文本框不可输入。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 可以采用onPropertyChange来捕获文本改变事件，试验成功！
onchange第二次点击失效的解决办法
cutedogdudu的博客
10-05 2462
$("#Qrcode").on("change",function(){ replace(); }); function replace() { $.ajaxFileUpload({ url:"__CONTROLLER__/QrcodeSet", secureuri:false, fileElementId:'Qrcode',//file标签的id
解决 html input file onchang 事件触发一次后失效问题
justinytsoft的博客
05-17 2386
原文链接：https://www.hebaocun.com/blog/21.html JS: $(function(){ $("#userFile").change(function(){ batchImportUser(); }); }) function batchImportUser(){ alert(1); $("#use...
JS改变input的value值不触发onchange事件解决方案
热门推荐
zhbitxhd的专栏
10-22 14万+
需要了解的知识     首先，我们需要了解onchange和onpropertychange的不同：     IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。 onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 onpropertychange 是IE浏览器的专属方法     了解这一点
Jquery:Js 赋值input onchange oninput事件用不了及解决措施
Rain
11-14 1万+
Js 赋值input onchange oninput事件用不了解决措施 事件了解： onchange： 正常触发: 值改变后，必须失去焦点 oninput: 正常触发： 事件在用户输入时触发 分析为什么不能用： 当readOnly的input 充当下拉框的时候，onchange 与 oninput的事件都不能用。猜测是不能获取焦点。导致的onchange事件不能正常用。 oninput是必须...
通过disabled和readonly将input设置为只读效果
12-14
首先，`disabled`属性将input元素设置为禁用状态。当一个input字段被`disabled`时，它的背景通常会呈现一种灰色半透明的效果，以表明用户无法交互。更重要的是，被`disabled`的input字段的值不会作为表单数据提交。...
jquery input文本框模拟select选择框获取选定
11-11
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript代码的编写，尤其是在处理DOM操作、事件处理以及动画效果等方面。对于标题提到的"jquery input文本框模拟select选择框获取选定"，这是...
H5环境下input标签为只读状态，点击事件失效
weixin_50064106的博客
12-07 1094
在一般情况下，被只读&禁用的u-input元素会拦截所有的鼠标事件，导致外层的view上写的点击事件不再生效。而加上pointer-events: none;后，u–input就不再拦截鼠标事件，外层的view上的点击事件就能够生效了。由于兼容性差异，nvue下需使用u–input，非nvue下需使用u-input；pointer-events: none 的作用是让元素实体 “虚化”；
js中的onchange和onpropertychange (onchange无效的解决方法)
01-19
笔者注：今天我在用到onchange事件时没有任何反应，最后翻查资料才知道Onchange的局限性和不稳定性。而onpropertychange却能很好的实现尤其是它的实时捕捉性能更是很值得用一下（幸亏有这个性能，做出的东西老板娘很满意 o(∩_∩)o…）。 本人也比较懒，自己做的东西也懒的整理下来只能把搜索到的资料原版拿来个大家分享一下： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来捕获。例如一个 <input name=”text1″ id=”text1″ /> 对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpr
处理input设置readonly属性之后外层容器无法触发事件
weixin_44326167的博客
12-05 1772
处理input设置readonly属性之后外层容器无法触发事件
input代替下拉框设置只读无法调用change事件的解决
runOnWay的博客
03-16 2392
在使用input标签代替select实现下拉框功能时，有时要禁止input的输入功能，只能选择下拉框中选项，选择后进行判断是否有值进入。 正常思路是选择选项后，使用change事件，但是使用readonly将input变为只读后，change事件会失效。 解决办法： 选择选项后使input失去焦点（也不能输入，失去焦点也没有影响），使用blur事件，在blur中编写相应的逻辑代码。 注...
input日期控件，无法触发文本改变事件onchange问题解决
weixin_43992507的博客
01-24 7620
input使用了日期控件onchange失效问题 由于日期控件内部对change进行其他设置，所以我们使用的时候会失效。 虽然有些控件把change事件改成了失去焦点事件，但还是没有我们想要的效果。 那么实现这个效果很简单如下代码只需要将 WdatePicker（{onpicked:函数名}）加入即可 HTML标签： &amp;amp;lt;input name=&amp;quot;accountingDate&amp;quot; id=&amp;quot;acco
JavaScript控制readonly属性无效
hellolongbin[一个人]的专栏
03-25 2642
readonly属性很BT的区分大小写,应写成readOnly如:document.all.htyy.readOnly=true;
input的onchange事件实际触发条件与解决方法
weixin_34014277的博客
12-28 1万+
  input中onchange事件已经属于元老级别了，并且现在同onclick一样使用频率很高，然而onchange的机制实际上有很多童鞋并不清楚，我们通过实例来分析这个事件的特征。 触发onchange 首先页面有一个input标签，并且已绑定onchange事件，如： 1&lt;input type="text" onchange="console.log(this.val...
input 标签添加readonly属性和laydate插件显示时间后，如何再增加 onChange事件的效果
风从北方来的博客
02-26 934
试错：直接在html 和js中给input标签绑定onChange事件不可行。 原因：readonly为只读，onChange事件为值变化后响应。但实测onChange事件只对界面输入值有效。通过dom对象修改改值无效。 解决1：百度其他人解决方法：用onblur代替, onblur事件在对象失去焦点时触发。实测效果偶尔可已出发，偶尔失败。 解决2：考虑到input框中用laydate渲染事件，在laydate中的done函数中，给该input框赋值为已经选择的值，在执行onChange事件中需要执行
input标签中设置readonly属性后光标显示问题
ken_ding的博客
10-30 3951
IE、火狐浏览器中，在HTML中,如果把一个的readonly属性设置为"readonly",表示这个表单元素不能编辑。但是,鼠标点击之后,这个表单元素还是有光标存在的。 以下方法可以解决这个问题： 1.设置属性 disabled=“disabled”， &lt;input type="text" id="id" style="width:250px;height:30px;" disabled=...
ie下input输入框readonly失效,光标仍可聚焦
帝都搬砖客
03-21 1万+
ie下input输入框设置了readonly属性,但是鼠标还可以点击光标聚焦, 改为bootstrap的disable属性后,无法聚焦但是表单提交又失效,无法传递参数, 而且聚焦后,backspace按键默认触发浏览器的返回功能, 后改为增加属性 unselectable='on',可以解决. $('#config_name'+index).attr("re
tkinter文本框设置为DISABLE后，无法inset内容
最新发布
12-06
在使用tkinter库进行Python GUI编程时，如果你将文本框（Text widget）设置为DISABLE状态，那么该文本框将变为只读，用户无法进行任何编辑操作，同时你也不能通过代码向其中插入内容。这是因为DISABLE状态会完全锁定文本框。 如果你希望在用户界面中显示只读文本，同时仍然能够通过代码动态更新内容，你应该使用"state"选项设置为"normal"或"readonly"。以下是一些可能的解决方案： 1. 使用"readonly"状态： ```python import tkinter as tk root = tk.Tk() text = tk.Text(root, state='normal') text.pack() text.insert('end', '这是一些初始文本。\n') # 设置为只读 text.config(state='readonly') # 尝试插入新内容（这将不起作用） text.insert('end', '这行不会被插入。\n') root.mainloop() ``` 2. 如果需要动态更新内容，可以临时将状态设置为"normal"，插入内容后立即恢复为"readonly"： ```python import tkinter as tk import threading import time def update_text(): while True: time.sleep(2) # 每2秒更新一次 text.config(state='normal') text.insert('end', '这是一条自动更新的消息。\n') text.config(state='readonly') root = tk.Tk() text = tk.Text(root, state='readonly') text.pack() # 启动一个后台线程来更新文本 threading.Thread(target=update_text, daemon=True).start() root.mainloop() ``` 3. 如果你只需要显示信息而不需要用户交互，可以考虑使用Label组件，它天然就是只读的： ```python import tkinter as tk import threading import time def update_label(): while True: time.sleep(2) # 每2秒更新一次 label.config(text=label.cget("text") + "这是一条自动更新的消息。\n") root = tk.Tk() label = tk.Label(root, text="初始文本\n", justify='left') label.pack() # 启动一个后台线程来更新标签 threading.Thread(target=update_label, daemon=True).start() root.mainloop() ``` 这些方法可以帮助你在保持只读特性的同时，仍然能够通过代码动态更新文本内容。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chemyoo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值