input点击事件只在右侧图标位置，如何扩大点击事件范围

lemontree-xy

已于 2023-08-29 17:08:00 修改

阅读量448

点赞数

文章标签： input uniapp

于 2023-08-29 17:06:27 首次发布

本文链接：https://blog.csdn.net/weixin_43337481/article/details/132565711

版权

在开发中，我们经常会遇到需要禁用input框的情况，但是禁用后无法添加点击事件的问题。
解决方法很简单，只需要在input框的父节点view中添加 style="pointer-events:none" 即可。具体

<uni-easyinput :styles="styles" disabled suffixIcon="forward" maxlength=10 style="pointer-events:none"
v-model="customFormData.payName" placeholder="请选择付款人" />

这里的 style="pointer-events:none" 可以在input或easyinput框禁用状态下，将点击事件完整覆盖

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

lemontree-xy

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
input点击事件只在右侧图标位置，如何扩大点击事件范围

这里的 style="pointer-events:none" 可以在input或easyinput框禁用状态下，将点击事件完整覆盖。
复制链接

扫一扫

[html] 如何给input的右上角加个清除的按钮？

歌谣的博客

03-29

646

[html] 如何给input的右上角加个清除的按钮？ <title>Insert title here</title> <style type="text/css"> .round { /大span/ background: #fff none repeat scroll 0 0; border: 1px solid #bbb; display: inline-block; height: 28px; margin-right: 2px; vertical-alig

利用伪类实现扩大input复选框的点击范围

weixin_46276411的博客

11-26

613

首先给input添加id <label for="input-item"> <input id="input-item-single" data-index="{{process.id}}" ng-value="{{process.id}}" ng-model="process.checked" ng-change="selectOne()" class="chat-button-location-radio-input" type="chec

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

uniapp实现点击input框外发送按钮键盘不收回

最新发布

qq_44741577的博客

05-16

456

场景：在聊天页面中，点击input输入框外面的一个发送按钮，导致input失焦导致键盘自动收回。

CSS如何扩大点击区域

qinnzheng

09-01

2371

如何扩大点击区域实现的效果：用透明色border + margin 负值实现 .agree-icon { width: 40rpx; height: 40rpx; background: url(./8.png) no-repeat center center; background-size: 28rpx 28rpx; border: 6rpx solid red; border-left: 20rpx solid red; border-right: 60rpx solid red; margi

TextInput输入框右侧添加按钮如：删除

孑书力的博客

02-23

8905

TextInput文本框右侧显示“清除”按钮。在RN api中有介绍 clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') 显示“清除”按钮但是只是适用于ios系统为了在Android系统正常适用，写组件来适配。思路：需要按钮显示和隐藏卡，就需要监听TextInput 输入的内容,如

html td input最右边,类似input框内最右边添加图标，有清空功能

weixin_29758513的博客

06-23

1013

Insert title here.round {/*大span*/background: #fff none repeat scroll0 0;border: 1px solid #bbb;display: inline-block;height: 28px;margin-right: 2px;vertical-align: top;width: 175px;position: relative...

html5输入框内部右侧,bootstrap实现input输入框内部的右侧清空按钮

weixin_39836536的博客

05-31

779

当鼠标悬浮在input上时显示出Xrequired="required"name="code"placeholder="请输入内容">style="pointer-events: auto;"onclick="$('#codeType').val('')">然后通过css去控制他的颜色，因为我们用的bootstrap字体图标也就是color.input-clear-a {color: ...

bootstrap布局中input输入框右侧图标点击功能

09-02

在Bootstrap布局中，我们经常需要在input输入框的右侧添加一些功能性的图标，例如清除按钮或切换密码可见性的图标。然而，Bootstrap默认情况下，并不直接支持这些图标触发点击事件。这是因为图标通常作为字体图标...

在input中右边加上一个图标的css样式

09-25

在网页设计中，为了增强用户体验或者提供更直观的指引，我们常常会在`input`元素的右侧添加图标。这种做法能够帮助用户理解输入框的目的，比如用于手机号码输入时，可能会添加电话图标。本文将详细解释如何使用CSS...

微信小程序input框中加入小图标的实现方法

12-29

最近入坑小程序，要求在小程序的...然后另辟蹊径，由于小程序中，好像只有image标签才能加载本地图片，所以考虑使用image标签来实现，大致思路就是在一个view中，左边是image,右边是input框，wxml页面如下: <vi

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

2301_78337613的博客

01-30

1743

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

扩大View的触摸和点击响应范围

onlySound的博客

03-30

199

若想在一个父布局扩大多个View的点击区域，可以在view嵌套一个RelativeLayout或LinearLayout布局，这样就一个父布局对应一个View。扩大View的触摸和点击响应范围,最大不超过其父View范围。注意：如果控件的位置有变化，那要在变化之后再调用此方法。

如何在uniapp框架中自己的页面中修改uni-easyinput或其它的扩展组件的宽高。

qq_52879298的博客

11-18

1916

高的话，先在组件源码中找到控制当前组件显示宽高的样式类名，然后在自己当前页面设置其演示即可，注意使用/deep/,比如uni-easyinput组件里控制显示的样式是uni-easyinput__content-input。哈哈哈宽简单，可以给这个组件外面套一层view，给view设置宽去挤压uni-easyinput的宽度。我页面上的组件宽高就生效了。目前我是在微信开发工具上测的，希望能帮到你。

vue 自定义指令点击区域放大器

本杰明的博客

07-21

1489

在vue的项目开发中一般会使用组件来进行代码复用，但是很多情况下纯粹使用组件会有一定的局限性，我们往往会追求最简洁的方式：如果只是对纯文本进行处理，无疑代码封装成filter过滤器是最好的选择–可参考《vue filter 过滤器》如果是一些全局性的简单动画提示组件或者方法（比如loading组件和axios方法），我们就可以考虑使用plugin插件为实例原型上添加方法以方便随时调用–可参考《v

css 小程序靠近输入框input,按钮控件点击区域放大热点区域

LlanyW的专栏

06-29

792

x，y方向都进行放大一倍。在原来的空间上，基本上不会挤变形其他元素，可以设备背景透明即可无遮挡。通过：transform:sale(2);

【前端学习笔记】CSS3 扩大点击响应范围这个方法你还不知道吗？详细解释话你知

ozoZai的博客

04-15

1158

【前端学习笔记】CSS3 扩大点击响应范围这个方法你还不知道吗？详细解释话你知！（CSS3 background-clip的利用）

UIButton 扩大点击响应区域

学海无涯苦作舟

10-12

1658

转自简书：http://www.jianshu.com/p/239adf1fae79 前言APP产品中不乏一些图标很小的，但需要响应的按键或者控件。如果这些需要响应的控件实际响应范围跟其响应的实际大小一样，是不是非常影响用户体验？我们的答案是肯定的（WTF，这里的肯定到底是影响还是不影响？��）。反正不管怎么样，如果产品有这个需求，我们也必须要处理的对不对？解决方案方案一（继承）：直接创

uni-easyinput @input事件不要带参

weixin_43337481的博客

07-24

310

uni-easyinput @input事件不要带参，否则不生效。

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

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

提交