微信小程序在input上放一个button点击问题

最新推荐文章于 2023-07-08 20:27:51 发布
最新推荐文章于 2023-07-08 20:27:51 发布
阅读量8.1k 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： 微信小程序 文章标签： 微信小程序在input上放一个button点击问题 [ 小程序]input 之上元素点击问题 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42205731/article/details/82843069
本文描述了一种常见的情况，即当取消按钮位于输入框之上时，点击取消按钮不会触发事件，因为输入框保持聚焦。解决方案是给外层的view设置等同于取消按钮宽度的padding-right。

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

如图所示,取消按钮定位在input框之上, 当我们点击的时候,input框一直是获取焦点状态,无法执行 取消事件.

解决方案, 

    给外层包裹的view ( 图2 黑线标注的地方是外层包裹的view) 设置padding-right 等于取消按钮的宽度即可.

微信小程序---点击按钮添加、删除输入框(input)
10-03 2万+
这篇文章以前几篇文章为基础！
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
12-28
做微信小程序项目的时候遇到一个功能，个人信息资料的修改与保存。以下是说明及简化后的代码： 1.页面加载完成时，所有input处于禁用状态；  2.点击编辑按钮时，文字切换成“保存”，身份证input保持始终不可修改状态（即禁用）， 姓名input可以修改（即动态加载切换禁用/启用）； 3.再次点击按钮文字切回“编辑”，所有input变为禁用状态。 以下是wxml部分 <view class=btn> <button bindtap=changeInfo>{{text}}</button> //绑定按钮的点击事件 </view> <view>姓名： <input class=
微信小程序如何让多个按钮横向排列
qq_43279097的博客
07-05 4034
使用了Felx布局，要调整按键位置主要操控margin、width这几个属性。
遇到的小问题： input和button放在一行
x_xxXmm的博客
08-23 8839
今天遇到的问题是 &lt;p id="search"&gt;搜索：&lt;input type="text" placeholder="请输入关键字" ng-model="search" &gt; &lt;/p&gt; &lt;button class="btn add_btn" ng-click="add()"&am
微信小程序如何将input框和button放在同一行
m0_59201654的博客
07-08 1545
父元素代码。
微信小程序 input输入框详解及简单实例
08-31
在微信小程序中，`input`组件是用于用户输入文本的关键元素。它提供了多种类型的输入框，如文本、数字、身份证号、日期等，满足不同场景的需求。以下是对`input`组件的详细解释及其相关实例。 ### 1. `input`基本...
微信小程序 input输入框控件详解及实例（多种示例）
08-31
在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...
button和input怎么放在一行_小程序闪亮登场,王者荣耀怎么修改成重复游戏名
weixin_30072453的博客
12-10 493
最近很久没有发文章了，一方面是工作太忙了，另一方面也确实没有什么值得分享给大家的。今天给喜欢玩游戏的带来一款福利，以王者荣耀为例：教大家设置重复的游戏ID。比如我的游戏ID是下面这样：再次搜索，我们发现有很多人都叫”王者荣耀“，比如下面这样。是不是很神奇！为什么可以这么做各位喜欢玩游戏的朋友，看到这里，可能会很好奇，为什么可以这么做？这是因为我们在游戏ID中加了...
button和input怎么放在一行_怎么知道原版是怎么实现 X 的？
weixin_35851482的博客
12-23 643
本文作者3TUSK（@3TUSK），使用CC0协议发布至公有领域。今天在 Harbinger[1] & Sputnik[2]反馈群中遇到一个问题： 请问 1.15 的 Forge 怎么执行指令啊显然是一个 XY 问题[3]。我追问： 你的目标真的是执行命令吗？得到的回复是： 在屏幕上显示一行字 目前我只会用 title 指令……Good，我们回到了一个老话题上去：我们经常会告诉新人「学会读...
微信小程序 input输入及动态设置按钮的实现
08-29
主要介绍了微信小程序 input输入及动态设置按钮的实现的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
微信小程序input框中加入小图标的实现方法
08-27
主要介绍了微信小程序input框中加入小图标的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
android:如何将按钮恰好显示在键盘之上？
郑海波(莫川)的优快云博客
03-25 5027
1.问题例如，如下某页面，当用户没有输入之前，键盘上方的“NEXT”的按钮是不显示的。用户输入手机号之后，就会显示在键盘上方，方便用户输入手机号之后，进入一下步。它是如何实现的呢？2.解决方案如果该页面是一个Activity，我们只需要一个属性就可以了，配置Activity的属性如下：<activity android:windowSoftInputMode="adjus
微信小程序input控件
Dax1_的博客
09-25 2413
首先主页面中将登录的样式进行了简单展示和使用，代码如下： <!--如果在同一个form表单中创建了多个input输入框，可以给给每个输入框， 创建自己的name=“userName”属性，可以区别哪个输入框，并通过添加 属性提交：bindsubmit="方法名" 重置：bindreset="方法名"， 达到清除输入框内容的目的 js文件中的用法，e.detail.value.userName.length--> <view class="itemView">用户名： &lt.
如何点击按钮把光标定位到想要的el-input中
guapilixianghe的博客
12-23 1059
3.回车键触发的方法。
CSS：input和button放在同一行
热门推荐
zcc9618的博客
04-08 1万+
给左边的控件添上一句 float:left; <style> #txtTask{ float:left; min-width:85%; } </style> html： <input type="text" id="txtTask" class="form-con...
微信小程序--瀑布流
雨Winning
07-02 6761
Lin-ui瀑布流学习
小程序-textarea，input内文本浮在定位元素和弹框之上的解决
zhangxy的博客
11-05 3497
试过官方的cover-view包裹加z-index不生效 2、浮在弹框表层 解决 给textarea，input 增加 wx:if 判断条件，当弹框显示是控制 textarea，input 显示条件为 false 即可。 2、浮在定位按钮表层 2、 ...
button按钮被输入法顶起来，遮盖了input输入框
weixin_30652879的博客
10-24 488
　　在做手机端的表单提交的时候，在chrome浏览器调试的时候，忘记输入法会引起布局的问题。在webApp里input输入框，会自动调起输入法，但是输入法会改变浏览器的可视区域的大小。就是会把浏览器可视区域的内容变小，因为输入法要占地方。一开始不知道怎么解决了，查了写资料，网上说是监控resize，当页面发生变化的时候，会触发该事件；哈哈,这就好办了... 　　开始按钮的显示是这样的...
微信小程序input会出现在弹窗上
最新发布
03-08
好的，我现在需要解决用户在微信小程序中遇到的input组件显示在弹窗之上的问题。用户提到弹窗出现时，input组件穿透覆盖，导致显示异常。首先，我应该回忆一下微信小程序的组件层级机制。 根据引用[3]，微信小程序...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

陨石猎人

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

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

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

打赏作者

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

抵扣说明：

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

余额充值