微信小程序 点击删除按钮，输入框失去焦点清空值

最新推荐文章于 2024-05-17 08:31:50 发布
最新推荐文章于 2024-05-17 08:31:50 发布
阅读量3.1k 收藏 1
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38337245/article/details/106942544
版权

 由于失去焦点，键盘回落没有及时触发清空，从而发现需要点击两下删除才清空，解决办法就是用定时器延迟触发清空

 

摆烂兔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序实现点击按钮后修改颜色
10-15
在微信小程序中，实现点击按钮后修改颜色是一个常见的交互效果，可以增强用户的操作体验。本文将详细介绍如何在微信小程序中实现这一功能，并提供相应的代码示例。 首先，我们需要理解微信小程序的基本架构。微信小...
小程序点击button后重置输入框内容
Seraph
08-21 7496
效果图 wxml <button bindtap="resetSalaryBtnClick" class="reset"> <view>重置</view> </button> wxss .reset { width: 16%; margin-top: 10rpx; margin-ri...
微信小程序 输入框点击清空按钮 清空值
Y1058144的博客
08-28 8588
点击右侧的清空按钮，实现输入框的值清空。 第一步：输入框设置value="{{inputValue}}"。 <view class="setInfo"> <view class="txt">手机号</view> <input class="mid" maxlength="11" placeholder="请输入手机号" value="{{inputValue}}" bindinput="bindReplaceInput"/> ..
微信小程序使用input标签遇到的问题
最新发布
qq_41687299的博客
05-17 569
场景2：input标签在scroll-view标签里边，聚焦键盘弹起后，滑动页面，当前聚焦的input标签会跟着滑动。解决方案：同样是曲线救国，聚焦的时候设置上层的元素隐藏，（如果是弹框的话，弹框弹起的时候设置input隐藏）在网上搜的用官方给的always-embed属性，但是也明确标注了只有ios可用。解决方案：曲线救国，聚焦或点击的时候禁止页面滚动，失焦的时候放开。场景1：多个input标签切换无法聚焦问题。场景3：input标签聚焦会覆盖其它的元素。
html 输入框添加清空按钮,【已解决】小程序中给input输入框内部右边添加关闭按钮清除输入内容...
weixin_33321522的博客
06-05 2990
现在已经实现了小程序中的input输入框的功能了：但是现在想要在输入框input内部的右边加上一个clear close的button，用于点击清除输入：类似于已有web版中的效果：小程序 输入框 清除 按钮被人是用image实现的自己去找找，记得小程序中有icon的是有要的：先去显示这个clear的icon然后去参考：的代码：先用代码：显示出来清除按钮了：然后再去想办法看看能否让其在input的...
微信小程序带清除按钮和搜索记录的实时搜索页面
热门推荐
u014636613的博客
06-14 1万+
近期开发小程序遇到个需求，需要在Input框中加一个清除按钮清除input框中的内容以及实时搜索 页面效果（未输入内容）： 有内容时样式: wxml代码： <view class='container'> <view class='search_input'> <icon type="search" size="15" class='search_i...
微信小程序-单页面完成增、删、全选、计数、清除功能
LzzMandy的博客
10-01 2167
业务逻辑： 1、添加：输入框中有数据，点击手机“完成”按钮或者“+”均可添加一条新数据 2、选择：点击列表的某一项，checkbox勾选或空； 3、删除：点击某一项后面的“x”，删除该项 4、全选：点击“Toggle all”文字全选，再次点击，全部选 5、未完成量：剩余几项未完成，取决于列表中没有打勾的项数，受影响的操作包括1、2、3、4 6、清除完成：清除已完成的项，即删除打...
微信小程序实现MUI数字输入框效果
12-29
本文实例为大家分享了微信小程序实现MUI数字输入框的具体代码，供大家参考，具体内容如下 效果图 WXML 默认 <button class=tui-number-cell bindtap=nextNum>-</button> <input class=tui-...
微信小程序开发之点击按钮退出小程序的实现方法
10-17
微信小程序开发中，实现用户点击按钮后退出小程序的功能，是开发者在进行小程序设计时可能需要考虑的一个用户体验问题。尽管微信小程序官方没有提供直接退出小程序的API，但可以利用“navigator”组件的“exit”功能...
微信小程序按钮点击动画效果的实现
01-03
动画效果如下： GIF看起来可能会有点卡 wxml 确定 wxss .confirm{ width: 325rpx; height: 80rpx; background: #07c160; border-radius: 6rpx; font-size: 30rpx; color: #fff;....bubble:after
微信小程序真机一键清空搜索框按钮失效的问题
Debug的博客
05-29 569
【代码】微信小程序真机一键清空搜索框按钮失效的问题。
微信小程序点击button按钮后重置输入框等表单内容
怎奈你何的博客
10-28 3152
效果如图 wxml如下图 在js文件中设置 /** * 重置条件 */ resetSalaryBtnClick: function (e) { this.setData({ minben: "", maxben: "", minprice: "", maxprice: "" }) }, 然后点击重置条件按钮。input框中输入的值都被清空啦。 ...
小程序软键盘 添加删除数字
Acitylion的博客
06-03 671
1.将软键盘绑定data-id 将获取的data-id的值 2.获取到我要出价的值，将拿到的值和data-id进行拼接 3. <!--出价软键盘--> <view class="mark" hidden="{{hidden}}" bindtap="bindMark"></view> <view class="...
微信小程序实现点击按钮新增或删除数组对象一行数据，以及判断新增一行数据该数组是否已经存在
baidu_39212797的博客
02-18 5108
1.效果图 2.静态页面wxml <view class="addbox"> <view class='add-li' bindtap='addList' >增加</view> </view> <view class="rank"> <view style="width:100%;"&g...
Uniapp(JS)实现小程序按键-＞短按删除、长按清空功能
qq_45228330的博客
08-26 1806
Uniapp(JS)实现小程序按键->短按删除、长按清空功能 参考博客：https://blog.csdn.net/weixin_33743292/article/details/113017148. 说明：代码部分使用了uniApp的一些插件，但是重点时Js实现的的思路 需要了解五个方法 1、按下手指时触发：ontouchstart 2、释放手指时触发：ontouchend 3、手指移动触发：ontouchmove 4、延时函数：setTimeout(要执行的代码, 等待的毫秒数) 延时函数也可做一
微信小程序中 input空间输入文字如何清空
weixin_37773766的博客
05-21 1384
场景：希望读取input控件的输入内容之后，清空输入框的内容。由于本人是JS小白，整整花了一两个小时都没找到方法。原来微信小程序不支持document通过id获取控件的方法，尽管编译不报错，但是实际是不起作用的，本人亲测。只能通过数据传递的方式实现，方法如下：        功能：按控件“输入”，之后input输入框就会清空[javascript] view plain copy//input.w...
微信小程序点击弹出输入框
03-28
要在微信小程序中弹出输入框，您需要执行以下步骤： 1. 在wxml文件中，您需要添加一个按钮或其他交互元素，当用户点击它时，输入框将弹出。 ``` <button bindtap="showInput">点击输入</button> ``` 2. 在js文件中，您需要创建一个函数来显示输入框。您可以使用微信小程序中的`showModal`函数来显示输入框。 ``` Page({ data: { inputValue: '' }, showInput: function() { wx.showModal({ title: '请输入', content: '', showCancel: true, success: function(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) } }) ``` 3. 在这个函数中，您可以设置输入框的标题和内容。当用户点击“确定”时，您可以在回调函数中获取输入框中的值，然后将其存储在数据中。 ``` Page({ data: { inputValue: '' }, showInput: function() { wx.showModal({ title: '请输入', content: '', showCancel: true, success: function(res) { if (res.confirm) { console.log('用户点击确定') console.log('输入的值为: ' + res.inputValue) this.setData({ inputValue: res.inputValue }) } else if (res.cancel) { console.log('用户点击取消') } } }) } }) ``` 4. 最后，您可以在wxml文件中使用数据绑定来显示输入框中的值。 ``` <button bindtap="showInput">点击输入</button> <text>您输入的值为: {{inputValue}}</text> ``` 这样，当用户点击按钮时，输入框将弹出，并且输入框中的值将显示在页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值