当前位置： 微信小程序 清空表单-微信小程序 表单提交
微信小程序公测已经有一段时间了，但是里面的坑一个接一个被踩，心够累的。 这篇文章讨论了 textarea 组件中的错误。 （注：本文提到的bug至少在2016-12-1还存在）
上一篇：微信小程序踏坑之旅一、wx.request和wx.uploadFile
测试期间使用：
在日常的开发过程中，textarea的使用频率相当高，很多时候需要使用Javascript来控制它的一些行为。 本文就举个例子来说说大家在开发中可能遇到的这个。 坑。
需求：清除textarea组件的内容。
需求这么简单微信小程序 清空表单，实现起来也这么简单（笑.jpg），有童鞋立马举手回答，并提出了解决方案。
选项 1 缺点
??的确，选项1完全可以清空textarea组件，但不够灵活。
场景 2
也有童鞋回答可以使用数据绑定功能，将textarea组件的value属性绑定到一个data属性上，这样当你想清空textarea组件的内容时，只需要赋一个空字符串值即可到绑定数据属性。 能。
??，上面的童鞋说到点子上了。 和很多流行的MVVM框架（比如vue、ng1、ng2等）一样，小程序也有数据绑定的功能（moving.jpg），所以下面就用这个方法来完成这个简单的需求。
（吐槽：不过比起那些框架，我觉得这个小程序的数据绑定功能用起来有点废了，可能被Vue惯坏了）
对比图
方案已经说了，不过既然说是踩坑之旅，那肯定没有方案说的那么简单，没有坑就丢人了。 下面将提供4个动画微信小程序 清空表单，都是按照方案2处理的，请仔细对比。
在微信网页开发工具中，所有实现方法：
你会看见：
方法一、textarea组件的内容无法清空
方法二，可以清空内容
方法三，可以清空内容
上面说了方法二和方法三都可以清除内容，那为什么会有方法三这么“搞笑”的写法呢？ 因为方法2的写法在手机端预览的时候会有bug，挺搞笑的bug，具体可以看三四运行图。
手机预览时，方法一：
与开发工具运行时的情况一样，无法清除。
手机预览时，方法二：
这个是bug，清除是没有问题的，但是童鞋们可以注意一下textarea组件placeholder的变化。 清除后，它会暂时没有。 为了解决这个bug，有一种写法3。
手机预览时，方法三：
添加了一个 setTimeout，并在 300 毫秒后将绑定属性设置为空字符串。
看到这里，相信童鞋们知道是怎么回事了，又到了吐槽微信开发组的时候了，赶紧修复这个莫名其妙的bug吧！
代码
有的人不能说代码不厚道，其实我是想让大家去我的仓库看看，因为我可以轻松star，哈哈哈。
处理页面的js，test.js
Page({
data: {
inputContent: ''
},
clearInputContent(e) {
const mode = parseInt(e.target.dataset.mode)
switch (mode) {
case 1:
this.setData({
inputContent: ''
})
break;
case 2:
this.setData({
inputContent: ' '
})
this.setData({
inputContent: ''
})
break;
case 3:
this.setData({
inputContent: ' '
})
setTimeout(_ => {
this.setData({
inputContent: ''
})
}, 300)
break;
}
}
})页面用户界面，test.wxml
textarea 组件 bug
上面的 textarea 组件 绑定了 inputContent 属性
方式1，执行 this.setData({inputContent: ''})
方式2，
执行 this.setData({inputContent: ' '})
执行 this.setData({inputContent: ''})
方式3，
执行 this.setData({inputContent: ' '})
执行 setTimeout(_ => { this.setData({inputContent: ''}) }, 300)
上一篇 
