微信小程序例子——点击发送信息清空输入框

最新推荐文章于 2024-01-31 18:31:11 发布
VIP文章 最新推荐文章于 2024-01-31 18:31:11 发布
阅读量1.3w 收藏 5
点赞数
分类专栏： 微信小程序开发例子 文章标签： Web前端 微信小程序 前端开发 清空输入框 发送信息
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/futruejet/article/details/53233528
版权

1、效果展示


2、关键代码

index.wxml文件


index.js文件


3、源代码获取方式

百度云链接：http://pan.baidu.com/s/1c2BnpnU 密码：rw9g


4、在使用点击发送信息清空输入框过程中有遇到任何问题或者不明白的地方，欢迎添加我的微信进行咨询，感谢支持！微信号：FutureJet


5、觉得不错请打赏，您的十分满

最低0.47元/天 解锁文章
FutrueJet
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序例子——使用form表单获取输入框数据
11-07
微信小程序例子——使用form表单获取输入框数据
微信小程序textarea 问题处理
03-29
最近在开发一个商城项目，其中有一块是评价，就像淘宝手机端的评价那样。首先看看我的页面结构。  (此图片来源于网络，如有侵权，请联系删除! )  就是一个页面可以多多个商品进行评价，每个写具体评价的位置是一个textarea。使用微信小程序开发公司调试是没有问题的，但是在手机端调试就有问题。  (此图片来源于网络，如有侵权，请联系删除! )  就是textarea不能跟随一起滚动。  微信小程序给了一些Bug和建议：  (此图片来源于网络，如有侵权，请联系删除! )  我这个界面底层并没有使用scroll-view,但是还是有问题。感觉微信给的第5点覆盖面不广，应该是对于滚动的页面都不行。在HT
微信小程序记住密码密码眼睛，开箱即用
最新发布
qq_50187801的博客
01-31 475
password = "{{!open}}" 同时open也控制input的password属性是否开启 通过三目运算符动态切换“眼睛”的显示（注意图片引用路径） 输入框值双向绑定 input标签中添加bindinput监听输入框事件 在data中声明要监听的属性 在input的值中绑定声明的值 通过方法进行输入框内容双向绑定 完整代码 JS WXSS 在WXML中有些类名是定义在app.wxss中的
微信小程序开发教程：input输入框点击后自动清空，方便用户重新输入，提升用户体验
qq_25501981的博客
12-02 1588
标签中，以便绑定一个事件处理函数。字段的值是通过页面的数据绑定来管理的。在上面的代码中，我假设你的。接下来，在你的页面的JavaScript代码中，添加。的当前值，并根据是否有内容来决定是否清空它。在这个事件的处理函数中，你可以检查。如果没有内容，则保持不变.是否有内容，如果有，就将其清空。要实现这样的功能，可以通过处理。字段时，如果里面有内容，函数就会被触发，从而清空。最后，确保在你的页面的。首先，你需要添加一个。字段的值绑定到了名为。
微信小程序点击发送清空输入框
weixin_42645102的博客
12-17 2992
微信小程序点击发送清空输入框 项目中的输入框由input + button组成，实现效果：点击button发送，input中内容发送并清空。 实现过程： input 的 value属性绑定data里的数据：value="{{inputVal}}" button 按钮绑定send函数：bindtap="send"， //发送 send: function() { const arr = ...
微信小程序input和textarea数据清除与自动填充
李墨瞳的博客
07-22 4002
记录一个小问题： 情况是这样的，需要一个意见弹窗，能自动填充联系方式。但是我怎么setData都没办法实现。后来发现其实是因为写HTML样式时候没有写value属性。只要写了，数据就能正常setData带出数据了，也能正常设置数据为空了。 具体代码是这样： <textarea class="weui-textarea" style="font-size:26rpx;height:110px;" bindinput="descText" maxlength="200" value="{{des
关于微信小程序清空input内容
weixin_47966295的博客
04-30 3307
最近在学习微信小程序云开发时做一个数据库的增操作，当中遇到了一个小问题，在这做一个记录，方便大家不要像我一样踩坑
微信小程序点击清空输入框
qq_41200621的博客
12-14 6479
执行逻辑先获取输入框有没有值，有值提示请先输入内容，没有值就setData一个null上去就可以清空输入框了，如果没有清空，可以给input一个inputValue属性设置一个空值，然后再Data上去就可以了。
微信小程序uni-app输入框textarea/input失焦事件在点击事件之后执行
weixin_45145119的博客
02-25 5732
前言：最近在做一个项目，输入框带清空按钮，因为textarea和input不能在小程序中双向绑定，绑定:value，在输入完成就点击清空按钮，会出现一个问题，清空不了，原因是输入框textarea/input失焦事件在点击事件之后执行，触发了点击事件时此时:value的值还没有被赋值进去，解决办法如下 1.定义一个变量为false，在点击时让这个变量为true 2.在失焦事件中判断如果这个变量为true，说明点击了清空按钮，赋值给:value,同时清空textarea 注意：清空时一定要加setTimeou
微信小程序项目实例——今日美食
05-24
微信小程序项目实例——今日美食 今日美食是为用户提供各种美食的制作方法，详细介绍了配料和制作流程
微信小程序例子——添加手机联系人、调节手机屏幕亮度
03-29
微信小程序例子——添加手机联系人、调节手机屏幕亮度       1、界面展示【使用滑动选择器控制手机屏幕亮度】 (此图片来源于网络，如有侵权，请联系删除! )   2、关键代码 1）、WXML代码   1  来自CODE的代码...
清空textbox的内容小程序（C#）
10-19
用于vs开发中的一个小技巧，方便新人使用，将tabpage1改为当前窗体名即可。
微信小程序——电影推荐（截图+源码）.zip
04-17
微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip 微信小程序——电影推荐（截图+源码）.zip ...
微信小程序项目实例——家居团购
06-04
微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例——家居团购微信小程序项目实例...
微信小程序 textarea输入框内文字，从中间删除快的时候，光标会从中间跳到最后位置
yongyafang123的博客
02-01 1716
小程序 输入框 删除光标问题
微信小程序：清空输入框信息与实现屏幕往上滚动
文优
06-20 3449
微信小程序：清空输入框信息与实现屏幕往上滚动 微信小程序，是属于小程序的一种，英文名为Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。微信小程序也是基于H5，JS的开发。 一. 清空输入框信息（重置输入框信息恢复默认值） 这是我在微信小程序实训开发的过程中出现的问题，多次思考后终于解决了输入框内已发送的消息无法被清空这个问题。从另一个角度说可以把清空输入框信息理解为重置输入框信息恢复初始默认值。以下是我的解决方案
微信小程序中 input空间输入文字如何清空
huangmeimao的专栏
07-10 4万+
场景：希望读取input控件的输入内容之后，清空输入框的内容。由于本人是JS小白，整整花了一两个小时都没找到方法。 原来微信小程序不支持document通过id获取控件的方法，尽管编译不报错，但是实际是不起作用的，本人亲测。 只能通过数据传递的方式实现，方法如下：          功能：按控件“输入”，之后input输入框就会清空 //input.wxml----添加控件
微信小程序 清空input内容
Timor的博客
02-12 8286
wxml文件如下：&lt;input style='border:solid 1px;' type='number' value="{{input_code}}"/&gt;&lt;button bindtap='click' type='primary' style='width:100px;margin-top:20px;'&gt;清空&lt;/button&gt;js文件如下：Page({ ...
微信小程序 清空或修改input值 的方法
热门推荐
happycxz的博客
07-17 5万+
微信小程序中的input组件，用来采集用户输入文本，官方组件并未提供接口供清除页面上显示的用户输入的部分，比如想要做一个按键“清除输入”，就尴尬了，因为button组件的事件里没办法控制到input组件的属性。网上搜了一些方法，比较讨巧的方式即，利用page data绑定的方式，即可实现上述功能，当然同时想要在程序中刷新input为其它信息也是很容易的事情了，具体参考以下代码：xx.wxml部分，将
微信小程序点击按钮出现文本输入框
05-12
要实现在微信小程序中点击按钮出现文本输入框，可以使用`<input>`组件来实现。下面是一个示例代码： ```html <view> <button bindtap="showInput">点击输入</button> <input type="text" wx:if="{{showInputBox}}" bindinput="onInput" placeholder="请输入内容" value="{{inputValue}}"/> </view> ``` 在`<button>`组件中，我们绑定了一个`showInput`方法，在这个方法中，我们可以设置一个变量`showInputBox`来控制文本输入框的显示和隐藏。 在`<input>`组件中，我们设置了`wx:if="{{showInputBox}}"`来控制组件的显示和隐藏，同时，我们绑定了一个`onInput`方法，用来处理文本输入框中的内容。在`<input>`组件中，我们还设置了一个`value`属性，用来保存用户输入的内容。 下面是示例代码的js部分： ```javascript Page({ data: { inputValue: '', showInputBox: false }, showInput: function () { this.setData({ showInputBox: true }) }, onInput: function (e) { this.setData({ inputValue: e.detail.value }) } }) ``` 在这个示例代码的js部分中，我们定义了一个`Page`对象，并在`data`属性中定义了两个变量`inputValue`和`showInputBox`，分别用来保存用户输入的内容和控制文本输入框的显示和隐藏。 在`showInput`方法中，我们将`showInputBox`设置为`true`，从而显示文本输入框。 在`onInput`方法中，我们将用户输入的内容保存在`inputValue`变量中。 最后，我们需要在`<button>`组件中绑定`showInput`方法，在`<input>`组件中绑定`onInput`方法，这样就可以实现在微信小程序中点击按钮出现文本输入框的功能了。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值