微信小程序input和textarea数据清除与自动填充

最新推荐文章于 2025-03-12 15:00:46 发布
最新推荐文章于 2025-03-12 15:00:46 发布
阅读量4.3k 收藏 3
点赞数
分类专栏： 微信小程序 javascript JS且走且珍惜
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39921345/article/details/107516832
版权

记录一个小问题：

情况是这样的，需要一个意见弹窗，能自动填充联系方式。但是我怎么setData都没办法实现。后来发现其实是因为写HTML样式时候没有写value属性。只要写了，数据就能正常setData带出数据了，也能正常设置数据为空了。

具体代码是这样：

	<textarea class="weui-textarea" style="font-size:26rpx;height:110px;" bindinput="descText" maxlength="200" value="{{descText}}"></textarea>	
	<input class="weui-input" placeholder="填写联系的电话号码或者邮箱" placeholder-style="font-size:26rpx;" style="font-size:26rpx" value="{{contact}}" bindinput="contact1"/>

微信小程序-页面开发
陆卿之的博客
01-02 3719
页面开发
微信小程序复习总结
2302_81909561的博客
04-27 1210
微信小程序简介微信小程序是一种由腾讯开发的应用程序软件，可在微信内直接使用，无需下载和安装。小程序的设计理念是"用完即走，无需安装"，旨在为用户提供轻量级的移动应用体验。通过微信平台提供的接口和工具，开发者可以创建不同类型的小程序，覆盖多个领域，如购物、社交、娱乐等。工具栏：在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等。模拟区：在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
小程序textarea文本框实时字数与内容清空
weixin_38946164的博客
07-15 3178
页面设计代码： <view class="feedback"> <view class="feedback-content"> <textarea class="feedback-content-info" bindinput="bindTextAreaChange" placeholder="感谢你提出的宝贵意见，我们会尽快完善" value="{{in...
微信小程序textarea 问题处理
03-29
最近在开发一个商城项目，其中有一块是评价，就像淘宝手机端的评价那样。首先看看我的页面结构。  (此图片来源于网络，如有侵权，请联系删除! )  就是一个页面可以多多个商品进行评价，每个写具体评价的位置是一个textarea。使用微信小程序开发公司调试是没有问题的，但是在手机端调试就有问题。  (此图片来源于网络，如有侵权，请联系删除! )  就是textarea不能跟随一起滚动。  微信小程序给了一些Bug和建议：  (此图片来源于网络，如有侵权，请联系删除! )  我这个界面底层并没有使用scroll-view,但是还是有问题。感觉微信给的第5点覆盖面不广，应该是对于滚动的页面都不行。在HT
微信小程序textarea组件应用介绍与案例精讲
最新发布
前端基地
03-12 1253
本文专注于微信小程序textarea组件。详细介绍其应用，包括组件的各项属性、功能及适用场景。同时搭配案例精讲，结合具体代码和实际效果展示，深入解析textarea组件在不同场景下的使用方法与技巧，帮助开发者快速上手并灵活运用该组件。
小程序清空textarea_小程序的爬坑之路
weixin_39700063的博客
11-20 347
前端时间，做了一个小程序的项目，中间遇到的坑也是特别多，现在和大家分享下我在小程序中遇到的坑。前端小七1：index.js 与app.js 执行顺序的问题，总是同时加载，而获取不到app.js返回来的结果，这里可以用回调函数解决这个问题，在app封装一个函数，在index里调用函数，判断如果数据为空就继续调用直到值不为空的时候执行。2：小程序中背景图的问题。小程序中的背景图只可以先https://...
小程序清空textarea_小程序云开发实现订阅消息
weixin_39748183的博客
11-23 364
根据微信小程序官方文档说明：小程序模板消息接口将于2020年1月10日下线，将无法使用旧的小程序模板消息接口发送模板消息，取而代之的是新的一次性订阅消息和长期订阅消息【查看旧的模板消息文档】https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html【订阅消息文档...
微信小程序——解决input 自动填充问题
qq_43201350的博客
10-29 2385
后面再加一个input ， 然后将这个Input隐藏 .hidden-input{ display:block; width:0 !important; height:0 !important; opacity:0; margin:0 !important; padding:0 !important; }
微信小程序中 input空间输入文字如何清空
weixin_37773766的博客
05-21 1444
场景：希望读取input控件的输入内容之后，清空输入框的内容。由于本人是JS小白，整整花了一两个小时都没找到方法。原来微信小程序不支持document通过id获取控件的方法，尽管编译不报错，但是实际是不起作用的，本人亲测。只能通过数据传递的方式实现，方法如下：        功能：按控件“输入”，之后input输入框就会清空[javascript] view plain copy//input.w...
【微信小程序实战教程】之微信小程序核心组件详解
柯晓楠
08-06 1999
组件化开发并不是小程序所特有的，一些其他编程语言中都有组件化的概念，准确来讲，只有视图层的展示，就必定要用到组件化。组件是视图层的最基本组成单元，组件中包含了一些基础功能和基础样式，一个组件就类似于一个自定义的标签。小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发，那么微信小程序提供的基础组件肯定是要完成小程序开发的基础功能与微信风格保持一致的样式。视图容器组件主要用于控制页面的内容，与HTML中的标签功能类似，可以把小程序的容器组件理解为一个盒子容器，可以将其他组件填充在
解决uniapp微信小程序，input框设置了maxlength时，ios在输入时拼音达到了最大长度导致无法继续输入问题
qq_75069372的博客
01-22 1755
解决uniapp微信小程序，input框设置了maxlength时，ios在输入时拼音达到了最大长度导致无法继续输入问题
微信小程序 textarea 简易解决方案
03-29
微信小程序中textarea没有bindchange事件，所以无法在输入时给变量赋值。 虽然可以使用bindblur事件，但是绑定bindblur事件，如果再点击按钮，则先执行完按钮事件后，再去执行bindblur事件，所以在js文件取不到输入值， 解决方法：结合from表单，textarea文本框输入后，再去点击提交按钮，这时会先执行textarea事件（获取文本框输入内容），再去执行数据提交，这样问题就解决了 wxml文件代码： <form bindsubmit="evaSubmit"> <textarea name="evaContent" maxlength="500" value="
微信小程序-2
weixin_64729620的博客
10-07 1151
微信开发文档。
小程序textarea踩坑-textarea动态获取值，点击提交无法清除该值
qq_44828153的博客
02-17 1352
场景：用户在textarea输入文本，并保存本地，用户再次进入页面时，textarea获取本地的值，点击提交却无法清除该值 1.value="{{discontent}}{{discontentSpace}}"，discontent为文本内容，discontentSpace是空字符串，在点击提交时同时清空这两个数据即可 <textarea class="disContent" disable-default-padding = "true" bindblur="bindTextAreaBlur"
微信小程序textarea不能清空内容的问题处理
程高伟
01-03 360
不知道为什么微信小程序使用textarea时，通过设置内容为空却无法清空组件内容，感觉都要点两下才能触发，或者有偶发性，很神奇。网上有很多关于textarea的问题，在微信开放社区，csdn上都有，尝试了一下都无效。最终通过设置超时处理解决了。
微信小程序 textarea输入框内文字，从中间删除快的时候，光标会从中间跳到最后位置
yongyafang123的博客
02-01 2380
小程序 输入框 删除光标问题
微信小程序清除输入框内容组件 清空Input weui中一键清除input内容
Taurus_666
05-26 6048
前提 首先，我是在引用weUI扩展组件情况下，自己做了适当修改，即可全局引用Input, 使用清空输入内容功能。components为weui组件，本身weui是没有input组件的，我自己添加了一个Input-clear组件。 使用方法 第一步：引入weUI组件，方法很多，我是直接引入了weUI的components文件夹，也可用其他方法引入，详见微信公众平台文档说明 第二步： 在app.wxss页面引入weui.wxss 第三步： 在需要使用weUI组件的页面的json文件中添加你需要的组件，一定要
微信小程序点击清空输入框
qq_41200621的博客
12-14 6852
执行逻辑先获取输入框有没有值，有值提示请先输入内容，没有值就setData一个null上去就可以清空输入框了，如果没有清空，可以给input一个inputValue属性设置一个空值，然后再Data上去就可以了。
微信小程序——textarea
weixin_57681196的博客
06-23 1422
当我们在HTML的表单中使用textarea元素时，常常需要限制用户输入的字符数量。这时我们可以使用maxlength属性，它可以控制textarea中输入的最大字符数量。但是，在使用maxlength属性时需要注意以下事项：maxlength属性不是强制性的，用户可以通过复制粘贴等方式绕过maxlength的限制。因此在后端也需要对用户的输入进行验证和过滤。maxlength属性只限制用户输入的字符数量，不限制用户输入的行数。
微信小程序textarea自动保存
08-23
### 回答1： 要实现微信小程序中的textarea自动保存，你可以使用小程序的API：wx.setStorageSync()方法来实现。具体步骤如下： 1. 在textarea组件中绑定一个input事件，在事件处理函数中获取文本框的值。 2. 在页面的onUnload生命周期函数中调用wx.setStorageSync()方法，将文本框的值保存到本地缓存中。 3. 在页面的onLoad生命周期函数中调用wx.getStorageSync()方法，获取之前保存的文本框的值，并将其设置给textarea组件的value属性。 下面是示例代码： ``` // index.js Page({ data: { textareaValue: '' }, onLoad: function () { // 获取之前保存的文本框的值 const textareaValue = wx.getStorageSync('textareaValue') if (textareaValue) { this.setData({ textareaValue }) } }, onUnload: function () { // 将文本框的值保存到本地缓存中 wx.setStorageSync('textareaValue', this.data.textareaValue) }, handleTextareaInput: function (event) { // 获取文本框的值 const textareaValue = event.detail.value this.setData({ textareaValue }) } }) ``` ``` <!-- index.wxml --> <textarea bindinput="handleTextareaInput" value="{{ textareaValue }}" ></textarea> ``` ### 回答2： 微信小程序的textarea组件默认是不会自动保存输入内容的。但是我们可以借助一些方法和技术来实现自动保存功能。 首先，我们可以利用textarea组件的bindinput事件，该事件会在用户输入内容时触发。我们可以在该事件的回调函数中获取用户输入的内容，并将其保存在本地存储中。 具体的实现思路如下： 1. 在textarea组件上绑定bindinput事件，并指定一个回调函数。 2. 在回调函数中，使用event.detail.value来获取用户输入的内容。 3. 将获取到的内容使用wx.setStorageSync()方法保存到本地存储中，以便后续读取。 假设我们的textarea组件的id为content，我们可以将实现代码如下： ```js Page({ data: { inputValue: '', // 用于保存输入的内容 }, // textarea的输入事件回调函数 handleInput(e) { // 获取用户输入的内容 const value = e.detail.value; // 将内容保存到本地存储 wx.setStorageSync('content', value); }, onLoad() { // 页面加载时，读取本地存储中的内容 const content = wx.getStorageSync('content'); if (content) { this.setData({ inputValue: content, }); } }, }); ``` 通过上述代码，我们实现了textarea的自动保存功能。每当用户输入内容时，会触发bindinput事件，将输入内容保存在本地存储中。而当页面加载时，会从本地存储中读取内容，并将其设置到textarea组件中，这样用户就能看到之前输入的内容。 ### 回答3： 微信小程序提供了textarea组件，可以方便地创建一个文本输入框。要实现自动保存功能，我们可以结合小程序的存储API和textarea的输入事件来完成。 首先，在小程序页面的wxml文件中，需要添加一个textarea组件，并为其绑定一个输入事件： ```html <textara bindinput="handleInput"></textarea> ``` 然后，在对应的js文件中，编写输入事件的处理函数： ```javascript Page({ data: { content: '' // 用于保存输入的内容 }, handleInput: function(e) { this.setData({ content: e.detail.value }); } }); ``` 在这个处理函数中，我们将输入的内容保存在data中的content变量中。 接下来，为了实现自动保存功能，我们可以利用小程序的存储API，如wx.setStorageSync()，在每次输入事件触发时都将内容保存起来： ```javascript Page({ data: { content: '' }, handleInput: function(e) { this.setData({ content: e.detail.value }); wx.setStorageSync('savedContent', e.detail.value); } }); ``` 在这个示例中，我们使用了wx.setStorageSync()方法，将输入的内容存储在本地缓存中，其中的'savedContent'为存储的键名，可以自定义。 最后，在小程序的onLoad生命周期函数中，我们可以在页面加载时检查是否有已保存的内容，并将其赋值给textarea的value属性，实现内容的自动填充： ```javascript Page({ data: { content: '' }, handleInput: function(e) { this.setData({ content: e.detail.value }); wx.setStorageSync('savedContent', e.detail.value); }, onLoad: function() { var savedContent = wx.getStorageSync('savedContent'); if (savedContent) { this.setData({ content: savedContent }); } } }); ``` 这样，每次用户输入内容时都会自动保存，并在下次进入小程序页面时自动填充之前的内容。用户可以随时在输入框中修改文本，而无需担心丢失内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值