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

最新推荐文章于 2025-06-24 10:29:45 发布
最新推荐文章于 2025-06-24 10:29:45 发布
阅读量7.1k 收藏 6
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 个人博客 个人见解 文章标签： javascript onchange事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chemyoo/article/details/78641812
本文探讨了在将输入文本框设置为readonly属性后，jQuery绑定的onchange事件无法正常触发的问题。通过采用原生JavaScript的方法，成功实现了事件的监听与处理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

解决input框被禁用后无法添加点击事件的几个方案
读心悦
05-24 1488
摘要： 针对禁用状态的input元素无法触发点击事件的问题，本文提供了多种解决方案： 属性替代：用readonly替代disabled，或通过CSS模拟禁用样式保留交互性； 事件委托：在父元素监听事件，通过冒泡机制间接响应； 修改pointer-events：强制恢复事件响应，需注意兼容性和视觉一致性； 无障碍方案：使用aria-disabled语义化标记，兼顾交互与可访问性。 复杂场景（嵌套结构、动态元素）可通过事件路径判断或动态绑定处理。各方案需结合实际需求选择，平衡功能、体验与兼容性。
js中的onchange和onpropertychange (onchange无效的解决方法)
01-19
笔者注：今天我在用到onchange事件时没有任何反应，最后翻查资料才知道Onchange的局限性和不稳定性。而onpropertychange却能很好的实现尤其是它的实时捕捉性能更是很值得用一下（幸亏有这个性能，做出的东西老板娘很满意 o(∩_∩)o…）。 本人也比较懒，自己做的东西也懒的整理下来只能把搜索到的资料原版拿来个大家分享一下： IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来捕获。例如一个 <input name=”text1″ id=”text1″ /> 对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpr
解决uniapp u-input设置disabled/readonly点击事件失效问题
最新发布
qq_45651201的博客
06-24 453
解决u-input组件设置disabled/readonly属性后点击事件失效的问题，可通过在外层添加view容器并设置pointer-events:none样式。该方法让鼠标事件穿透input元素，触发外层view的点击事件。MDN解释pointer-events:none会使元素不成为鼠标事件目标，事件会穿透到下层元素，从而保留交互功能的同时实现输入框的只读效果。（约120字）
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是必须...
H5环境下input标签为只读状态，点击事件失效
weixin_50064106的博客
12-07 1030
在一般情况下，被只读&禁用的u-input元素会拦截所有的鼠标事件，导致外层的view上写的点击事件不再生效。而加上pointer-events: none;后，u–input就不再拦截鼠标事件，外层的view上的点击事件就能够生效了。由于兼容性差异，nvue下需使用u–input，非nvue下需使用u-input；pointer-events: none 的作用是让元素实体 “虚化”；
处理input设置readonly属性之后外层容器无法触发事件
weixin_44326167的博客
12-05 1671
处理input设置readonly属性之后外层容器无法触发事件
Django Form设置文本框为readonly操作
09-16
当需要在前端展示信息但不允许用户修改时，我们可以将文本框设置为只读（readonly）。本文将详细介绍如何在Django Form中实现这一功能，并提供两种不同的方法。 方法一是在自定义的form类中通过`__init__()`方法来...
通过disabled和readonly将input设置为只读效果
12-14
首先，`disabled`属性将input元素设置为禁用状态。当一个input字段被`disabled`时，它的背景通常会呈现一种灰色半透明的效果，以表明用户无法交互。更重要的是，被`disabled`的input字段的值不会作为表单数据提交。...
捕获input文本框内容改变事件的js代码
12-10
网上一位老兄采用如此方法： readonly :是文本框不可输入。 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 可以采用onPropertyChange来捕获文本改变事件，试验成功！
jquery input文本框模拟select选择框获取选定
11-11
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了JavaScript代码的编写，尤其是在处理DOM操作、事件处理以及动画效果等方面。对于标题提到的"jquery input文本框模拟select选择框获取选定"，这是...
input代替下拉框设置只读无法调用change事件的解决
runOnWay的博客
03-16 2362
在使用input标签代替select实现下拉框功能时，有时要禁止input的输入功能，只能选择下拉框中选项，选择后进行判断是否有值进入。 正常思路是选择选项后，使用change事件，但是使用readonly将input变为只读后，change事件会失效。 解决办法： 选择选项后使input失去焦点（也不能输入，失去焦点也没有影响），使用blur事件，在blur中编写相应的逻辑代码。 注...
input日期控件，无法触发文本改变事件onchange问题解决
weixin_43992507的博客
01-24 7559
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 2623
readonly属性很BT的区分大小写,应写成readOnly如:document.all.htyy.readOnly=true;
odoo onchange readonly
weixin_30878361的博客
09-20 303
onchange 中只可以获取form中给的值其他值都为False onchange 默认不可在其中修改readonly字段, 修改方法, 添加force_save <field name="emm" colspan="2" readonly="1" force_save = "1"/> 转载于:https://www.cnblogs.com/edhg/p/115...
input 标签添加readonly属性和laydate插件显示时间后，如何再增加 onChange事件的效果
风从北方来的博客
02-26 914
试错：直接在html 和js中给input标签绑定onChange事件不可行。 原因：readonly为只读，onChange事件为值变化后响应。但实测onChange事件只对界面输入值有效。通过dom对象修改改值无效。 解决1：百度其他人解决方法：用onblur代替, onblur事件在对象失去焦点时触发。实测效果偶尔可已出发，偶尔失败。 解决2：考虑到input框中用laydate渲染事件，在laydate中的done函数中，给该input框赋值为已经选择的值，在执行onChange事件中需要执行
ie下input输入框readonly失效,光标仍可聚焦
帝都搬砖客
03-21 1万+
ie下input输入框设置了readonly属性,但是鼠标还可以点击光标聚焦, 改为bootstrap的disable属性后,无法聚焦但是表单提交又失效,无法传递参数, 而且聚焦后,backspace按键默认触发浏览器的返回功能, 后改为增加属性 unselectable='on',可以解决. $('#config_name'+index).attr("re
捕获input 文本框内容改变的事件
weixin_30872337的博客
07-26 248
input 文本框内容改变，我们可以使用onchange或者onblur来进行判断，但是onchange是在文本内容改变，然后失去焦点的时候发生，onblur是在失去焦点时候发生，不会自己去判断。 网上一位老兄采用如此方法： <input type="text" id="testId" readonly onPropertyChange="showValue(this.valu...
Jquery bind 事件 -- readonly 的input 组件
ruilin521314
03-10 192
if (nullReg.test($("#borrowTime").val())) {$("#borrowTimeError").html("借用时间不能为空！"); $("#borrowTime").select(); $("#borrowTime").bind("change", function() { //$("#borrowTime").bind(&
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
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

chemyoo

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

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

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

打赏作者

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

抵扣说明：

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

余额充值