关于微信小程序textarea时事获取value值的操作

最新推荐文章于 2023-11-14 22:05:30 发布

原创最新推荐文章于 2023-11-14 22:05:30 发布 · 2.3w 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序textarea #textarea实时获取里面的内容

微信小程序专栏收录该内容

41 篇文章

订阅专栏

本文介绍在WXML中如何使用Textarea控件，并通过form表单和按钮操作来实现内容的获取与保存。详细解释了两种不同方式的实现过程及存在的bug。

部署运行你感兴趣的模型镜像

1.把textarea放在<form>表单里面进行操作（常用操作）

//wxml
//textarea绑定了失去焦点时的事件
<form bindsubmit='fabiao'>
<view class='evaluation_concent'>
<textarea placeholder="觉得这件商品如何，快来说几句吧"  value='{{concent}}'   bindblur='bindTextAreaBlur'   focus="{{focus}}" >
</textarea>
</view> 

<button class='big-btn' form-type="submit">发表</button>
</form>

//点击按钮时把textarea中的内容保存在这里
<view>{{concent1}}</view>

//失去焦点时获取里面评论内容
bindTextAreaBlur:function(e){
console.log(e.detail.value)
this.setData({
concent: e.detail.value,
})
},
//点击按钮时得到里面的值
fabiao:function(e){
this.setData({
focus:'false'，
concent1: this.data.concent,
})
console.log(this.data.concent)    
}

2.单独按钮点击时操作textarea（不推荐使用，有bug）

(此方法存在bug不建议使用,js代码是一样的，不过还是在这里说一下)

//wxml

<view class='evaluation_concent'>
<textarea placeholder="觉得这件商品如何，快来说几句吧"  value='{{concent}}'   bindblur='bindTextAreaBlur'   focus="{{focus}}" >
</textarea>
</view> 

<button class='big-btn'  bindtap="fabiao">发表</button>

//点击按钮时把textarea中的内容保存在这里
<view>{{concent1}}</view>

//失去焦点时获取里面评论内容

//如果此时我输入的内容是我是一个textarea   第一次点击有如下效果
bindTextAreaBlur:function(e){
console.log(e.detail.value)         //打印结果”是我是一个textarea”
this.setData({
concent: e.detail.value,
})
},


//点击按钮时得到里面的值(此时失去焦点的时间没有被执行)
fabiao:function(e){

this.setData({
focus:'false'，                            
concent1: this.data.concent,         //打印结果   ”是我是一个textarea”
})
console.log(this.data.concent)  //打印结果    ””  
}

1.第一次点击按钮时失去焦点事件还没有被执行所以此时它获取不到concent里的值，打印的结果为空

2.第二次点击按钮时失去焦点事件已经被执行过一次了所以此时它获取到concent里的值其实是上一次输入的值，如果你每次都在更改textarea里的值，这种方法无法实时的去得到textarea里的值，虽然最后content1中的值与content中的一致，但是如果你是需要将textarea里的值点击一次之后传到后台传入的值将为空。

您可能感兴趣的与本文相关的镜像