处理input设置readonly属性之后外层容器无法触发事件

最新推荐文章于 2024-03-06 11:12:03 发布

不会切肉的小辉同学

最新推荐文章于 2024-03-06 11:12:03 发布

阅读量951

点赞数 10

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_44326167/article/details/134808312

版权

需求是点击输入框弹窗显示一个列表，选择列表项之后回显到输入框。因此输入框内容是不允许修改的，因此我设置了readonly属性。然后由于input没有点击事件，所以我在外层包了一个容器，在外层添加了点击事件，但是我发现无法触发事件。翻看文档是因为input设置readonly之后点击事件被拦截了。

处理方法：对input添加样式 style="pointer-events: none;"

<u-input style="pointer-events: none;" placeholder="请选择注册城市" v-model="form.city" readonly></u-input>

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不会切肉的小辉同学

关注关注

10
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
处理input设置readonly属性之后外层容器无法触发事件

处理input设置readonly属性之后外层容器无法触发事件
复制链接

扫一扫

[removed]为input设置readOnly属性(示例讲解)

12-08

设置readOnly属性 <textarea name=”content” id=”content” cols=”27″ rows=”6″></textarea> var cObj = document.getElementById(“content”); cObj.setAttribute(“readOnly”,’true’...

用js一次改变多个input的readonly属性值的方法

10-25

主要介绍了用js一次改变多个input的readonly属性值的方法,需要的朋友可以参考下

参与评论您还未登录，请先登录后发表或查看评论

ios input为readonly后，点击input会弹起软键盘

namemui的博客

07-25

2612

<input type="number" readonly="readonly" unselectable="on" onfocus="this.blur()" id="number" name="number" placeholder="人数"/> 在input中添加unselectable="on" onfocus

【uniapp】解决在H5谷歌浏览器，微信公众号H5 下 u-input 标签设置只读readonly后,click事件不生效

最新发布

AAAXiaoApple的博客

03-06

786

【uniapp】解决在H5谷歌浏览器，微信公众号H5 下 u-input 标签设置只读readonly后,click事件不生效

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

chemyoo的博客

11-27

6567

input文本框，设置为readonly后，由于onchage事件是当文本框失去焦点后才会触发的，所以导致使用jq绑定事件无效。处理方式使用原生js获取到文本框，document.inuptName.onchange = function (){ alert('onchange 事件触发')}。

input输入框设置了disabled后想触发点击事件

qq_47163013的博客

01-15

966

input输入框设置了disabled禁止输入，然后想通过外层点击事件触发其它内容的弹出，安卓手机在公众号中会不生效，ios和浏览器环境下没有问题。1、把之前的disabled属性更换成了readonly。2、给input增加点击事件清除的样式如下。

【uniapp】解决在H5谷歌浏览器下 u-input 标签设置只读后,click事件不生效

一位前行者的博客

11-07

9038

导致外层的view上写的点击事件不再生效。后，u–input就不再拦截鼠标事件，外层的view上的点击事件就能够正常生效了。使u–input里写上readonly&disabled为true之后，在外层的view上写的点击事件生效。的作用是让元素实体 “虚化”，我们可以看到这个标签，但只是一个虚幻的影子而已，类似于海市蜃楼。：由于兼容性差异，nvue下需使用u–input，非nvue下需使用u-input。但是更换浏览器后就可以，打包app也是正常可以触发的，本来是没打算。的u-input元素会。

uView——uview 中 u-input 设置只读后点击事件不生效解决方案

qq_43201350的博客

01-12

1305

uView——uview 中 u-input 设置只读后点击事件不生效解决方案

vue使用element框架，el-input设置readonly，点击事件失效

HDdgut的博客

11-24

4199

解决使用 @click.native

input readonly 属性

Manarola的博客

04-12

1519

<input type="text" readonly>让input标签不可编辑

通过disabled和readonly将input设置为只读效果

12-14

首先，`disabled`属性将input元素设置为禁用状态。当一个input字段被`disabled`时，它的背景通常会呈现一种灰色半透明的效果，以表明用户无法交互。更重要的是，被`disabled`的input字段的值不会作为表单数据提交。...

input 标签添加readonly属性和laydate插件显示时间后，如何再增加 onChange事件的效果

风从北方来的博客

02-26

841

试错：直接在html 和js中给input标签绑定onChange事件不可行。原因：readonly为只读，onChange事件为值变化后响应。但实测onChange事件只对界面输入值有效。通过dom对象修改改值无效。解决1：百度其他人解决方法：用onblur代替, onblur事件在对象失去焦点时触发。实测效果偶尔可已出发，偶尔失败。解决2：考虑到input框中用laydate渲染事件，在laydate中的done函数中，给该input框赋值为已经选择的值，在执行onChange事件中需要执行

H5环境下input标签为只读状态，点击事件失效

weixin_50064106的博客

12-07

787

在一般情况下，被只读&禁用的u-input元素会拦截所有的鼠标事件，导致外层的view上写的点击事件不再生效。而加上pointer-events: none;后，u–input就不再拦截鼠标事件，外层的view上的点击事件就能够生效了。由于兼容性差异，nvue下需使用u–input，非nvue下需使用u-input；pointer-events: none 的作用是让元素实体 “虚化”；

vue 表单验证 input 是 readonly 点击点击事件@click.native 选好后 v-model也赋值了一直是红色的报错状态

qq_27806371的博客

07-20

312

vue 表单验证 input 是 readonly 点击点击事件@click.native 选好后 v-model也赋值了一直是红色的报错状态使用trigger: 'blur|change' 即可解决。

form中的input可以设置readonly和disable，请问这两项属性有什么区别？举个例子

weixin_42095178的博客

02-02

277

readonly 和 disabled 属性在 HTML 表单元素中都用于限制用户输入，但它们之间存在一些重要的差异。当一个元素被设置为 readonly，用户仍然可以看到该输入框并可以聚焦它，但无法修改其内容。当一个元素被设置为 disabled，用户既不能看到输入框也不能聚焦它，以及不能修改其内容。disabled 不仅限制了编辑，还完全禁用了与输入框相关的所有用户交互。readonly 只限制了用户的编辑能力，但允许其他交互（如复制值）。用户不能复制输入框中的内容。

input 输入框不能点 readonly ， disabled

weixin_34302798的博客

07-06

729

只读 readonly="readonly" 不可用 disabled="disabled" 背景变灰色转载于:https://www.cnblogs.com/yang-C-J/p/7125266.html

input中disable与readonly的区别及其相关属性

Janus

01-06

5480

====== input中disable与readonly的区别 ======放在form表单中提交后得不到该值。将disabled="disabled" 改为 readonly = "readonly" 即可设置为disabled的input将会有下面的限制：不能接收焦点使用tab键时将被跳过可能不是successful的被限制的对象值将不会被传递到后台程序。设置为readonly的input将

input标签设置文本不可修改的两种状态（disable、readonly）区别

good_good_xiu的博客

04-02

3906

问题场景：一般我们在对数据的增删改查操作中，有一些数据是不允许修改的，比如创建时间等固定信息。实际开发中，我们会使用disabled属性或者readonly属性将input文本框设置成不可修改。这两者有什么区别呢？ <input type ="text" name = "name" value = "XXX" disabled> disabled属性会使文本框变灰，而且后端通过request.getParameter(“name”)得不到文本框中的内容。原因是，在表单传输数据时，如果inpu

那些年踩过的坑——input输入框 ios端 readyonly 点击出现光标

weixin_33729196的博客

01-15

416

input输入框加了readonly属性就可以达到只读的效果，但是在ios端，点击该输入框还是会出现光标解决办法，给输入框加上 unselectable="on" onfocus="this.blur()" <input type="text" value="(1-5000元)" readonly unselectable="on...

jquery设置表单元素只读_JQuery控制input的readonly和disabled属性

05-26

可以使用 jQuery 的 `prop()` 方法来设置表单元素的 `readonly` 和 `disabled` 属性。例如，要将一个输入框设置为只读，可以使用以下代码： ```javascript $("#input-id").prop("readonly", true); ``` 同样地，要将一个输入框设置为禁用，可以使用以下代码： ```javascript $("#input-id").prop("disabled", true); ``` 需要注意的是，`readonly` 属性表示输入框只读，用户可以复制内容但无法修改；而 `disabled` 属性表示输入框被禁用，用户无法复制、修改或提交其中的内容。两者的效果略有不同，需要根据具体情况进行选择。