Detailed explanation of how to use textarea in WeChat development

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 Please refer to

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 you can use the bindblur event, if you bind the bindblur event and click the button, the button event will be executed first and then the bindblur event will be executed, so in jsThe file cannot get the input value,

Solution: Combined with the from form, after inputting into the textarea text box, click the submit button, then the textarea event will be executed first (Get the text box input content), and then perform data submission, so the problem is solved

wxmlFile 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 text box cannot be obtained immediately. If there is a better solution, I hope you can learn about it!

【Related recommendations】

1. WeChat public account platform source code download

2. Alizi order system source code download

The above is the detailed content of Detailed explanation of how to use textarea in WeChat development. For more information, please follow other related articles on the PHP Chinese website!