Maison > Applet WeChat > Développement WeChat > Explication détaillée de la façon d'utiliser la zone de texte dans le développement WeChat

Explication détaillée de la façon d'utiliser la zone de texte dans le développement WeChat

Y2J
Libérer: 2017-05-12 11:09:57
original
2112 Les gens l'ont consulté

Cet article présente principalement l'explication détaillée et l'utilisation simple de la zone de texte de l'applet WeChat. Voici l'exemple de code d'implémentation et la méthode pour résoudre le problème selon lequel la zone de texte n'a pas d'événement bindchange et ne peut pas attribuer de valeurs aux variables lors de la saisie. ceux qui en ont besoin peuvent se référer à ce qui suit

Solution simple pour la zone de texte de l'applet WeChat

Il n'y a pas d'événement bindchange pour la zone de texte dans l'applet WeChat, donc les variables ne peuvent pas se voir attribuer de valeurs ​pendant la saisie.

Bien que l'événement bindblur puisse être utilisé, si vous liez l'événement bindblur et cliquez sur le bouton , l'événement bouton sera exécuté en premier, puis l'événement bindblur sera exécuté, donc dans jsLe fichier ne peut pas obtenir la valeur d'entrée,

Solution : Combiné avec le formulaire from, après avoir saisi dans la zone de texte de la zone de texte, cliquez sur le bouton Soumettre, alors l'événement textarea sera exécuté en premier (Obtenir le contenu d'entrée de la zone de texte), puis effectuera la soumission des données, afin que le problème soit résolu

wxmlCode du fichier :


<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>
Copier après la connexion

code du fichier js :


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);
      }
  });
 }
})
Copier après la connexion

Inconvénients :

Après cette opération, la fonction sera défectueuse. Par exemple, le nombre de caractères saisis dans la zone de texte utilisateur ne peut pas être obtenu immédiatement. S'il existe une meilleure solution, j'espère que vous pourrez la découvrir !

[Recommandations associées]

1. Téléchargement du code source de la plateforme de compte public WeChat

2 Téléchargement du code source du système de commande Alizi

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal