在u--input中使用click事件不生效

努力爬升中

已于 2024-01-30 10:53:25 修改

阅读量1k

点赞数 11

文章标签： uni-app 前端

于 2024-01-30 10:24:40 首次发布

本文链接：https://blog.csdn.net/2301_78337613/article/details/135927061

版权

u--input里面写了disabled之后，导致的click事件失效

只需要：

给外边包上一个盒子设置点击事件，给input加上css属性：pointer-events：none

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target (en-US)。

除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

<view @click='handleClick'>
    <u--input
    style="pointer-events:none"
    :disabled="true"
    placeholder="请输入"/>
</view>

优惠劵

努力爬升中

关注关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
在u--input中使用click事件不生效

给外边包上一个盒子设置点击事件，给input加上css属性：pointer-events：none。u--input里面写了disabled之后，导致的click事件失效。
复制链接

扫一扫

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

一位前行者的博客

11-07

8031

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

jquery绑定事件不生效的解决方法

12-10

今天在开发前台页面时发现jquery绑定click事件，怎么都不生效。代码如下： 1.html：<input id=”ceshisub” type=”button” value=”单击事件” > 2.html引用的test.js中的方法函数：代码如下: $(“#ceshisub”).bind(“click”,function(){ var a=1; a +=1; alert(“ceshisub”); }); 出现的问题就是在页面中点解“单击事件”按钮没有任何反应，打开js调试窗口在var a=1;这一行打的断点没有进来。解决的办法是：一、在上述js函数上添加加载事件：添加后的代码如

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

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

weixin_50064106的博客

12-07

649

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

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

AAAXiaoApple的博客

03-06

386

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

input按钮中的onclick事件

weixin_30500289的博客

07-12

8620

input按钮onclick事件大全 <INPUT onclick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开 name=Button1> <INPUT onclick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为 name=B...

uview1.0部分机型u-input组件禁用后无法触发click事件

给我一根筷子，我能撬动整个地球

10-22

1616

最近，线上的一个 App 收到用户反馈，输入框禁用状态下点击无法拉起模态框。找了一下身边可用机型进行了测试，在。中复现了这个问题，只有输入框右侧的图标可以触发点击事件，点击输入框无法触发点击事件。注：input 组件是 uniapp 提供的内置表单组件，是没有点击事件的。也就是说在部分 Android 机型上，禁用状态下的。事件没有向上冒泡，从而导致外层的盒子无法触发事件。组件外套了盒子，外面的盒子确实绑定了。事件，我们处理的实际上是。组件的点击事件而不是。

vue input点击事件

吃黄瓜不蘸酱的博客

02-17

1551

el-button @click=“$refs[‘searchForm’].resetFields()”>重置。1.直接在重置上使用不需要加this。input添加readonly属性。3.下面定义的data也要给字段名。1.input点击事件。2.重置表单注意事项。

解决uni在H5谷歌浏览器下 input 标签设置 disabled 后,click事件不触发

2301_76742166的博客

08-25

2671

解决uni在H5谷歌浏览器下 input 标签设置 disabled 后,click事件不触发

vue 中 input事件

子敬的技术博客

07-02

8264

vue 中 input事件 input事件的使用 <div :id="inputId" :class="['textarea_content_right']" :contenteditable="true" @input="changeText($event)" v-text= "currentValue" ></div> data() { return...

uniapp h5端部分浏览器input设置disabled后点击事件失效

我总是词不达意的博客

10-09

1742

uniapp h5端部分浏览器input设置disabled后点击事件失效

详解angularJS动态生成的页面中ng-click无效解决办法

12-09

今天碰到了一个这样的需求，在自己写的动态的页面中，写入的AngularJS无效不能点击响应事件，以下给出代码以及解决方案 1.首先将我们要赋值给页面的数据new一下 var html = "<a href='[removed]void(0);' ng-click='test()'></a>" 2.用$compile函数编译一下上边的内容 var $html = $compile(html)($scope); 3.将编译好的内容插入到页面中 $("body").append($html); 完成以下是完整版本 app.controller('customersCtrl',

解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题

01-19

问题描述：在IE8及以下版本时，点击label标签无法自动触发checkbox的click事件，导致无法产生希望的效果。原HTML代码： <div class=col-sm-2> <label><input type=checkbox id=chk_sqjc value=申请检查 name=menu class=cbr cbr-blue>申请检查</label> </div> $(input:checkbox[name='menu']).each(function (index, element) { $(this).click

解决layui动态添加的元素click等事件触发不了的问题

12-13

在页面加载完成时候 ‘.add_project’ 元素是可以触发click时间的，当动态添加 ‘.add_project’ 时候，新添加的元素却触发不了click事件，类似下面的写法： $(".add_project").on('click', function(){ alert('1') }); 解决办法很简单，就是用全局的document来监控 ‘.add_project’ 元素，如下： $[removed]("click",".add_project",function(){ alert('1'); }) 这样就很好的解决了问题了。以上这篇解决layui动态添加的元

jquery应该如何来设置改变按钮input的onclick事件

01-19

jquery应该如何来设置按钮input的onclick事件?比如开始时有个按钮： <input id=”prebt” type=”button” value=”上一页” onclick=”ToPage(2)”/>这行代码是在程序后台生成的，和Discuz!NT论坛源码中的做法一样，页面上所有的东西连同脚本都是由后台代码生成..然后用jquery.ajax加载到页面上来..其他的除了ie8不能显示之外..其它浏览器都正常.现在的问题是：要动态改变这个上一页按钮中onclick的函数.我自己是尝试了很多种方法，都没有做出来，下面列举的几个都是失败的例子： 1.JavaScript code:

通过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>

input为disabled提交后得不到该值的解决方法

10-30

input的字段当为diabled时时无法获取数值得，所以最近不要用这个，我们可以用readonly带替代，即可解决这类问题

uniapp 安卓批量异步权限授权，没有授权就跳系统App设置页

最新发布

weixin_59685936的博客

04-20

515

uniapp 安卓批量异步权限授权，没有授权就跳系统App设置页

uniapp H5项目获取接口的二进制流转化成图片url（base64）

qq_41910413的博客

04-19

481

uniapp H5项目获取接口的二进制流转化成图片url（base64）

uview的input组件使用v-model不生效

07-27

引用\[1\]:当在自定义组件上使用 v-model 时，编译器会将 v-model 展开为如下的形式： <CustomInput :modelValue="searchText" @update:modelValue="newValue => searchText = newValue" /> 。引用\[2\]:注：这个 event 事件名只能是 input model:{ prop: 'value', // 此处的value为父组件v-model绑定数据 event: 'input' // 派发事件，事件名只能是input，否则无法生效 }, methods:{ timeChange(e) { if(this.format) { // 更新 model this.$emit('input', uni.$u.timeFormat(e.value,this.format)); } else { // 更新 model this.$emit('input', e.value); } }, } 。根据您提供的引用内容，uview的input组件使用v-model不生效的问题可能是由于以下原因导致的： 1. 您在自定义组件上使用了v-model，但是没有正确处理modelValue和update:modelValue事件。在自定义组件中，您需要将v-model展开为一个modelValue属性和一个update:modelValue事件，以便正确绑定和更新数据。\[1\] 2. 您可能没有正确设置input组件的model属性和event属性。在uview的input组件中，您需要将model属性设置为'value'，将event属性设置为'input'，以便正确绑定和更新数据。\[2\] 3. 您可能在使用u-input组件时出现了其他问题，比如条件渲染(v-if)导致组件不正确地显示或隐藏。请确保您的条件渲染逻辑正确，并且组件能够正确地显示和绑定数据。\[3\] 综上所述，如果uview的input组件使用v-model不生效，您可以检查以上几个方面的问题，并确保正确设置和处理modelValue属性和update:modelValue事件，以及正确设置model和event属性。 #### 引用[.reference_title] - *1* *2* [组件二次封装之自定义 v-model](https://blog.csdn.net/lwx931449660/article/details/122354581)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [uview，u-input组件在明密文切换时app不生效](https://blog.csdn.net/weixin_44202904/article/details/130620984)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交