How to use WeChat applet textarea

This article mainly introduces the detailed explanation and simple usage of WeChat applet textarea. Here is the implementation example code, and the method to solve the problem that textarea has no bindchange event and cannot assign values ​​to variables during input. Friends who need it can For reference,

WeChat mini program textarea simple solution

There is no bindchange event for textarea in WeChat mini program, so variables cannot be assigned values ​​during input.

Although the bindblur event can be used, if you bind the bindblur event and click the button again, the button event will be executed first and then the bindblur event will be executed, so the input value cannot be obtained in the js file,

Solution: Combined with the from form, after inputting into the textarea text box, click the submit button. At this time, the textarea event will be executed first (get the input content of the text box), and then the data will be executed. Submit, so the problem is solved

wxml file code:

<form bindsubmit="evaSubmit">
   <textarea name="evaContent" maxlength="500" value="{{evaContent}}" class="weui-textarea" placeholder="填写内容(12-500字)"bindblur="charChange" />     
   <button formType="submit" disabled="{{subdisabled}}" class="weui-btn mini-btn" type="primary" size="mini">提交</button>
 </form>

js file Code:

var app = getApp();
Page({
 data:{
   evaContent  : ''
 },
 onLoad:function(){
 },
 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 },
 //事件
 textBlur: function(e){
   if(e.detail&&e.detail.value.length>0){
    if(e.detail.value.length<12||e.detail.value.length>500){
     //app.func.showToast(&#39;内容为12-500个字符&#39;,&#39;loading&#39;,1200);
    }else{
     this.setData({
       evaContent : e.detail.value
     });
    }
   }else{
    this.setData({
      evaContent : &#39;&#39;
    });
    evaData.evaContent = &#39;&#39;;
    app.func.showToast(&#39;请输入投诉内容&#39;,&#39;loading&#39;,1200);
   }
 },
 //提交事件
 evaSubmit:function(eee){  
  var that = this;
  //提交(自定义的get方法)
  app.func.req(&#39;http://localhost:1111/ffeva/complaint?content=&#39;&#39;+this.data.evaContent),get,function(res){
      console.log(res);
      if(res.result===&#39;1&#39;){
       //跳转到首页
       app.func.showToast(&#39;提交成功&#39;,&#39;loading&#39;,1200);
      }else{
       app.func.showToast(&#39;提交失败&#39;,&#39;loading&#39;,1200);
      }
  });
 }
})

Disadvantages:

After this operation, the function will be defective. For example, the number of characters entered in the user's text box cannot be obtained immediately. If there is a better solution, I hope you can learn about it!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis of onLoad in WeChat Mini Program

WeChat Mini Program Example of scroll-view implementing pull-up loading and pull-down refresh

The above is the detailed content of How to use WeChat applet textarea. For more information, please follow other related articles on the PHP Chinese website!