Detailed explanation and simple usage of WeChat mini program textarea-WeChat Development-php.cn

Detailed explanation and simple usage of WeChat mini program textarea

高洛峰

Release： 2017-04-25 10:43:26

Original

2973 people have browsed it

WeChat applet textarea simple solution

There is no bindchange event for textarea in WeChat applet, 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 submission will be executed, so that 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>

Copy after login

js file code:

var app = getApp();
Page({
 data:{
   evaContent  : &#39;&#39;
 },
 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);
      }
  });
 }
})

Copy after login

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!

For more detailed explanations and simple usage of WeChat mini program textarea, please pay attention to the PHP Chinese website!