微信小程序中 textarea 的具体使用方式解析

why 265 2024-08-26

这篇文章主要介绍了微信小程序 textarea 详解及简单使用方法的相关资料,这里附有实现实例代码,及解决textarea没有bindchange事件,无法在输入时给变量赋值的方法, 需要的朋友可以参考下

微信小程序中 textarea 的具体使用方式解析

微信小程序 textarea 简易解决方案

微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值。

虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件后,再去执行bindblur事件,所以在js文件取不到输入值,

解决方法:结合from表单,textarea文本框输入后,再去点击提交按钮,这时会先执行textarea事件(获取文本框输入内容),再去执行数据提交,这样问题就解决了

wxml文件代码:


1

2

3

4

<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文件代码:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

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);

      }

  });

 }

})


 缺点:

这样操作后,功能就有缺陷。例如,无法即时获取用户文本框输入字符个数,如果有更好的解决方法,希望能学习一下!

以上就是本文的全部内容,希望对大家的学习有所帮助。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序中实时圆形进度条的实现方式探讨
下一篇:微信小程序中触控事件的全面介绍与解析
相关文章

 发表评论

暂时没有评论,来抢沙发吧~