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

最新推荐文章于 2025-06-24 10:29:45 发布
原创 最新推荐文章于 2025-06-24 10:29:45 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

由于博客内容为空，暂无法提供包含关键信息的摘要。

在这里插入图片描述

在 input 标签上 加上 style="pointer-events: none;"
uView——uview 中 u-input 设置只读后点击事件不生效解决方案
qq_43201350的博客
01-12 2665
uView——uview 中 u-input 设置只读后点击事件不生效解决方案
分析使input框不可编辑的方法及优缺点
IT修真院：初学者转行到互联网的聚集地
05-14 815
这里是IT修真院分享课，今天要分享的主题是 【分析使input框不可编辑的方法及优缺点】 一、使input文本框不可编辑的3种方法 1.disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。 示例： <input type="text" disabled=...
通过disabled和readonly将input设置为只读效果
12-14
有两种方式可以实现input的只读效果：disabled 和 readonly。 自然两种出来的效果都是只能读取不能编辑，可是两者有很大不同。 Disabled说明该input无效，及其value不会传递给任何程序，比如asp、php等。 Readonly仅仅是无法编辑，不影响其值的传递。 Disabled使用：<INPUT type="text" name="username" value="james" disabled> Readonly使用：<INPUT type="text" name="partNumber" value="1500" readonly>
【uniapp】解决在H5谷歌浏览器下 u-input 标签 设置只读后,click事件不生效
11-07 1万+
导致外层的view上写的点击事件不再生效。后，u–input就不再拦截鼠标事件，外层的view上的点击事件就能够正常生效了。使u–input里写上readonly&disabled为true之后，在外层的view上写的点击事件生效。的作用是让元素实体 “虚化”，我们可以看到这个标签，但只是一个虚幻的影子而已，类似于海市蜃楼。：由于兼容性差异，nvue下需使用u–input，非nvue下需使用u-input。但是更换浏览器后就可以，打包app也是正常可以触发的，本来是没打算。的u-input元素会。
uniapp中u-input点击事件失效
maohangfei.cn
06-12 2693
当给u-input设置了属性后，pc浏览器中点击事件失效，但是app/移动端h5中却仍有效。
uview1.0部分机型u-input组件禁用后无法触发click事件
呆呆papa的博客
10-22 2651
最近，线上的一个 App 收到用户反馈，输入框禁用状态下点击无法拉起模态框。找了一下身边可用机型进行了测试，在。中复现了这个问题，只有输入框右侧的图标可以触发点击事件，点击输入框无法触发点击事件。注：input 组件是 uniapp 提供的内置表单组件，是没有点击事件的。也就是说在部分 Android 机型上，禁用状态下的。事件没有向上冒泡，从而导致外层的盒子无法触发事件。组件外套了盒子，外面的盒子确实绑定了。事件，我们处理的实际上是。组件的点击事件而不是。
微信公众号H5页面--JqueryWeui组件使用
weixin_34088838的博客
09-08 888
背景 最近在做一个微信公众号的h5页面，使用Jquery Weui组件实现项目中需要的功能。做个笔记，方便后期使用。若有不好的地方，欢迎给出宝贵建议哦。 功能 滚动加载更多 [Jquery Weui] 本例中以 body 为参考对象，以下是代码的展示： html部分 &lt;div id="list"&gt; &lt;/div&gt; /*滚动加载 start*/ &lt;div c...
input为disabled提交后得不到该值的解决方法
10-30
标题和描述提到的问题核心在于，`disabled` 属性的`input`字段在提交表单时不会包含其值，而`readonly`则可以。 `disabled` 属性： - 当一个`input`字段设置为`disabled`时，用户无法编辑该字段的值。 - 这样的字段...
H5环境下input标签为只读状态，点击事件失效
weixin_50064106的博客
12-07 1101
在一般情况下，被只读&禁用的u-input元素会拦截所有的鼠标事件，导致外层的view上写的点击事件不再生效。而加上pointer-events: none;后，u–input就不再拦截鼠标事件，外层的view上的点击事件就能够生效了。由于兼容性差异，nvue下需使用u–input，非nvue下需使用u-input；pointer-events: none 的作用是让元素实体 “虚化”；
处理input设置readonly属性之后外层容器无法触发事件
weixin_44326167的博客
12-05 1779
处理input设置readonly属性之后外层容器无法触发事件
解决uniapp u-input设置disabled/readonly点击事件失效问题
qq_45651201的博客
06-24 968
解决u-input组件设置disabled/readonly属性后点击事件失效的问题，可通过在外层添加view容器并设置pointer-events:none样式。该方法让鼠标事件穿透input元素，触发外层view的点击事件。MDN解释pointer-events:none会使元素不成为鼠标事件目标，事件会穿透到下层元素，从而保留交互功能的同时实现输入框的只读效果。（约120字）
input设置为disable，不能点击
only_neo的博客
03-26 2万+
今天项目中遇到了一个小问题，用的vue，封装了一个模拟的input，点击后可以弹出dialog，绑定的点击事件放在了引用的那里    &lt;div class="dialogInput"&gt; &lt;span class="el-input__prefix"&gt; &lt;i class="el-input__icon el-icon-search"...
readOnly修改不生效的一种情况
hello world
06-14 2122
原因是：readOnly不是靠true和false来控制的，只要有readOnly，不管它后面是啥值都是不可改变的，所以应该这么写才对。想用如下代码实现改变readOnly的值，但是却不起作用，请问该怎么修改？
uniapp input 如何禁用输入但只读？
weixin_42220130的博客
01-15 6299
disabled默认为false，修改为true即可禁用输入。
uni-app 如何设置 怎么设置 input textarea设置只读 readonly
时间在飞飞的博客
05-12 8771
uni-app input 设置只读，设置属性disabled为true或disabled <input type="text" placeholder='只读属性的input' v-model="text" disabled="true"></input>
uni-app input设置只读
ycs_0405的专栏
08-23 1万+
uni-app input 设置只读，设置属性disabled为true或disabled <input type="digit" class='cell-bd-input' placeholder='请填写押金' v-model="deposit" disabled="true"></input>
uni-app中报错 'openid' is read-only解决办法
热门推荐
qq_24347541的博客
04-28 4万+
最近学习uni-app的时候，需要微信授权登录。 ，然后就把微信的授权登录的请求都写在了main.js中，第一次访问url时请求正常，当刷新一下url时，f12就会报错： ‘openid’ is read-only. 贴出报错的源码： const openid=null; var jweixin = require('jweixin-module') uni.getStorage({ ...
关于uniapp 中uview input组件设置为readonly 或者disabled input区域不可点击问题
m0_63542260的博客
04-29 1217
item.placeholder : '请输入' "在最外层绑定@click="bindClick(item)" 事件 在u--input 设置style="pointer-events:none"就可以顺利触发bindClick 事件。
怎么解决uni在H5谷歌浏览器下u-field 设置 :disabled="true"后,中间文字部分click事件不触发
最新发布
07-17
在 Uni-app 中使用 `u-field` 组件时，若通过设置 `disabled` 属性使其处于禁用状态，在 H5 端可能会出现点击事件无法正常触发的问题。该问题的核心原因在于 HTML 原生的 `<input>` 或 `<textarea>` 元素在设置了 `disabled` 属性后会阻止所有交互事件（包括 `click`）[^1]。 为了解决这一问题，可以采用以下几种方式： ### 使用 `readonly` 替代 `disabled` 将 `disabled` 改为 `readonly` 是一种常见解决方案。这样可以让输入框保持不可编辑的状态，同时允许点击事件的触发。例如： ```vue <template> <u-field label="只读字段" :value="inputValue" readonly @click="handleClick"></u-field> </template> <script> export default { data() { return { inputValue: '点击我' }; }, methods: { handleClick() { console.log('Field clicked'); } } }; </script> ``` ### 手动添加透明层覆盖 另一种方法是在 `u-field` 上叠加一个透明的 `view` 层，并为其绑定点击事件。这种方式适用于需要保留 `disabled` 样式但又希望点击事件能被响应的场景： ```vue <template> <view style="position: relative;"> <u-field label="禁用字段" :value="inputValue" disabled></u-field> <view style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;" @click="handleClick"></view> </view> </template> <script> export default { data() { return { inputValue: '点击我' }; }, methods: { handleClick() { console.log('Transparent overlay clicked'); } } }; </script> ``` ### 自定义组件逻辑控制 还可以通过对 `u-field` 的行为进行封装，根据业务需求动态切换状态。例如，可以在数据层面控制是否允许修改内容，而界面上仍显示为可交互样式，从而避免直接使用 `disabled` 或 `readonly`： ```vue <template> <u-field label="自定义禁用字段" :value="inputValue" :disabled="isCustomDisabled" @click="handleClick"></u-field> </template> <script> export default { data() { return { inputValue: '点击我', isCustomDisabled: true }; }, methods: { handleClick() { if (!this.isCustomDisabled) { console.log('Field is editable'); } else { console.log('Field is visually enabled but logically disabled'); } } } }; </script> ``` 以上方法均能在一定程度上缓解或解决 H5 平台上 `u-field` 在禁用状态下点击事件失效的问题。具体选择哪种方案取决于实际应用场景以及对用户体验的要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值