微信小程序textarea详解及简单使用方法

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

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

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

wxml文件代码：

           <button formType="submit" disabled="{{subdisabled}}" class="weui-btn mini-btn" type="primary" size="mini">提交</button> </form></pre><p>js文件代码：</p><pre class="brush:js;toolbar:false">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('内容为12-500个字符','loading',1200);    }else{     this.setData({       evaContent : e.detail.value     });    }   }else{    this.setData({      evaContent : ''    });    evaData.evaContent = '';    app.func.showToast('请输入投诉内容','loading',1200);   } }, //提交事件 evaSubmit:function(eee){    var that = this;  //提交(自定义的get方法)  app.func.req('http://localhost:1111/ffeva/complaint?content=''+this.data.evaContent),get,function(res){      console.log(res);      if(res.result==='1'){       //跳转到首页       app.func.showToast('提交成功','loading',1200);      }else{       app.func.showToast('提交失败','loading',1200);      }  }); }})</pre><p> 缺点：</p><p>这样操作后，功能就有缺陷。例如，无法即时获取用户文本框输入字符个数，如果有更好的解决方法，希望能学习一下！</p><p>更多微信小程序 textarea 详解及简单使用方法相关文章请关注PHP中文网！    </div>								 
				<!--相关文章-->			
				<style type="text/css">				
				.indexNewList ul li{float:left;margin-left:20px;list-style:none;}				
				.indexNewList h4{font-size:14px;font-style:italic;}				
				#cls-xg{clear:both;font-size:14px;}			
				</style>			
							 
				<!--相关文章-->
                <div class="more">
                    <div>上一篇：<a href="http://www.thinksite.cn/show-45-9040-1.html">微信小程序中使元素占满整个屏幕高度实现方法</a></div>
                    <div>下一篇：<a href="http://www.thinksite.cn/show-45-9042-1.html">微信小程序input输入框控件详解及实例（多种示例）</a></div>
                </div>
            </div>					 
        </div>		
        <div style="width:250px;border-left:1px solid #eeeeee;float:left;" class="other_div">
			<h3 style="border-bottom:1px solid orange;padding-bottom:10px;margin-bottom:10px;">工具库</h3>
			<ul>
				                                                                                                                <li><a href="http://www.thinksite.cn/show-45-40263-1.html" target="_blank" title="23个Git实用技巧及命令汇总">23个Git实用技巧及命令汇总</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9649-1.html" target="_blank" title="微信公众平台快速上手教程Part4开发模式讲解">微信公众平台快速上手教程Pa</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9648-1.html" target="_blank" title="微信公众平台设置关键词自动回复">微信公众平台设置关键词自动</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9647-1.html" target="_blank" title="如何获取微信公众原始号？">如何获取微信公众原始号？</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9646-1.html" target="_blank" title="微信公众号能够发送的各类图文信息总结">微信公众号能够发送的各类图</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9645-1.html" target="_blank" title="微信公众平台快速上手教程Part1注册账户与认证">微信公众平台快速上手教程Pa</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9644-1.html" target="_blank" title="微信公众平台快速上手教程Part2消息管理与群发">微信公众平台快速上手教程Pa</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9643-1.html" target="_blank" title="微信公众平台快速上手教程Part3素材编辑与自动回复">微信公众平台快速上手教程Pa</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9642-1.html" target="_blank" title="微信公众平台快速上手教程Part5公众会议帐号">微信公众平台快速上手教程Pa</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9641-1.html" target="_blank" title="微信公众平台问题综合解答（6月8日更新）">微信公众平台问题综合解答（</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9640-1.html" target="_blank" title="微信公众平台快速上手教程Part6微信运营十大要决">微信公众平台快速上手教程Pa</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9639-1.html" target="_blank" title="进版必看！微信公众平台初级使用教程">进版必看！微信公众平台初级</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9638-1.html" target="_blank" title="微信公众平台教程（三）素材编辑">微信公众平台教程（三）素材</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9637-1.html" target="_blank" title="微信公众平台消息接口开发教程（四）天气预报">微信公众平台消息接口开发教</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9636-1.html" target="_blank" title="微信公众帐号开发教程第1篇-引言">微信公众帐号开发教程第1篇-</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9635-1.html" target="_blank" title="微信公众平台开发模式消息接口开发（26）从Hello2BizUser">微信公众平台开发模式消息接</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9634-1.html" target="_blank" title="微信公众帐号开发教程第7篇-文本消息中换行符的使用">微信公众帐号开发教程第7篇-</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9633-1.html" target="_blank" title="微信公众帐号开发教程第6篇-文本消息的内容长度限制揭秘">微信公众帐号开发教程第6篇-</a></li>
                                                                                <li><a href="http://www.thinksite.cn/show-45-9632-1.html" target="_blank" title="微信公众帐号开发教程第5篇-各种消息的接收与响应">微信公众帐号开发教程第5篇-</a></li>
                                                                			</ul>
		</div>
		</div>
		<div style="clear:both;"></div>
		<div class="newsOperat">
            <div class="tellYou">本文由欣才IT学院整理发布，未经许可，禁止转载。</div>
            <div class="agreeBox"><a href="javascript:void(0)" class="agree" data-tag="y"><i></i>支持<span></span><font>14</font></a><a href="javascript:void(0)" class="disagree" data-tag="n"><i></i>不支持<span></span><font>0</font></a></div>
            <div class="bdsharebuttonbox shareBox" data-tag="share_1">
                <a class="more" data-cmd="more"></a>
                <a class="wx" data-cmd="weixin"></a>
                <a class="wb" data-cmd="tsina"></a>
                <a class="zoom" data-cmd="qzone"></a>
                <a class="tencent" data-cmd="tqq"></a>
            </div>
            <script>
                window._bd_share_config={
                    "common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},
                    "share":{},
                    "bdCustomStyle":"http://www.thinksite.cn/statics/css/thinksite/index.css"
                };
                with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
            </script>
        </div>
    </div>
</div>

<script language="JavaScript" src="http://www.thinksite.cn/api.php?op=count&id=9041&modelid=1"></script>
<!--<script>-->
    <!--window.onload=function(){-->
        <!--// 当高亮css改变时，更改pre的背景颜色-->
        <!--var editColor=$(".column code").css('backgroundColor')-->
        <!--$(".column code").parent().css("background",editColor)-->
    <!--}-->
<!--</script>-->
<script>
    $(function(){
        var fixxTop = $(".newsOperat").offset().top+87;
        var winnHei = $(window).height()
        var currHei;
        $(window).scroll(function(){
            currHei = scrollMyTop();
            if(fixxTop < winnHei){
                return false
            }else if(fixxTop > winnHei){
                if(currHei < fixxTop-winnHei){
                    $(".newsOperat,.newsDetail").addClass("on")
                }else if(currHei > fixxTop-winnHei ){
                    $(".newsOperat,.newsDetail").removeClass("on")
                }

            }

        })
        //点赞效果
        $(document).on('click',".agreeBox a",function(){
            var voteTips='<div class="vote-tips">+1</div>';
            var $this=$(this)
            var initalNum=$.trim($this.find('font').text())
            var nextNum=initalNum*1+1
            var id="9041"
            var tag=$this.attr('data-tag');
            if(!$this.parent().hasClass('checked')){
                if(id){
                    $.ajax({
                        type: "post",
                        url: "http://www.thinksite.cn/index.php?m=content&c=index&a=do_support",
                        data: {id : id,tag : tag,model : 'news'},
                        dataType: "html",
                        success: function (data) {
                            if(data=='ok') {
                                $this.parent().addClass('checked')
                                $this.addClass('on')
                                $this.append(voteTips)
                                $this.find('font').html(nextNum)
                                setTimeout(function(){
                                    $this.find('.vote-tips').remove()
                                },1000)
                            }
                        }
                    });
                }
            }
        })

    })
</script>
<!--footer-->
<!--footer-->
<div class="footerBox">
    <div class="footer container">
        <div class="footerTop">
            <div class="fTLeft">
                <a class="logo_footer"></a>
                <p>让更多人成为更优秀的互联网工程师</p>
                <div class="phone_footer"></div>
            </div>
            <div class="fTMiddle">
                <ul>
                    <li>
                        <a href="http://www.thinksite.cn/list-16-1.html" target="_blank" title="PHP培训课程">PHP培训课程</a>
                        <a href="http://www.thinksite.cn/list-65-1.html" target="_blank" title="HTML5培训课程">HTML5培训课程</a>
						<a href="http://www.thinksite.cn/list-114-1.html" target="_blank" title="java培训课程">java培训课程</a>
						<a href="http://www.thinksite.cn/list-39-1.html" target="_blank" title="python培训课程">python培训课程</a>
                        
                       
                    </li>
                    <li>
						 <a href="http://www.thinksite.cn/list-17-1.html" target="_blank" title="讲师团队">讲师团队</a>
                        <a href="http://www.thinksite.cn/list-23-0-1-ids.html" target="_blank" title="学员作品">学员作品</a>
                        <a href="http://www.thinksite.cn/list-86-1.html" target="_blank" title="限时就业">限时就业</a>
                    </li>
                    <li>
                        <a href="http://www.thinksite.cn/list-29-1.html" target="_blank" title="学员拓展">学员拓展</a>
                        <a href="http://www.thinksite.cn/list-27-1.html" target="_blank" title="教学环境">教学环境</a>
                        <a href="http://www.thinksite.cn/list-85-1.html" target="_blank" title="报名流程">报名流程</a>
                    </li>
                    <li>
                        <a href="http://www.thinksite.cn/list-22-1.html" target="_blank" title="新闻资讯">新闻资讯</a>
                        <a href="" target="_blank" title="学员访谈">学员访谈</a>
                        <a href="http://www.thinksite.cn/sitemap.html" target="_blank" title="网站地图">网站地图</a>
                    </li>
                    <li>
                        <a href="http://www.thinksite.cn/list-64-1.html" target="_blank" title="关于我们">关于我们</a>
                        <a href="http://www.thinksite.cn/list-38-1.html" target="_blank" title="就业合作">就业合作</a>
                    </li>
                </ul>
            </div>
            <div class="fTRight">
                <a><img src="http://www.thinksite.cn/statics/images/thinksite/ewm.png">
                    <p>欣才学院微信公众号</p>
                </a>
            </div>
        </div>
		<div style="text-align:center;margin-top:10px;">欣才IT学院为小伙伴们提供专业<a href="http://www.thinksite.cn"><strong style="color:orange;">PHP培训</strong></a>、<a href="http://www.thinksite.cn"><strong style="color:orange;">python培训</strong></a>、<a href="http://www.thinksite.cn"><strong style="color:orange;">java培训</strong></a>、<a href="http://www.thinksite.cn"><strong style="color:orange;">HTML5培训</strong></a>让更多人成为更优秀的互联网工程师！期待您的到来！</div>
        <div class="footerBottom">Copyright©2008-2020 <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">苏ICP备11039863号－2</a>
            <script type="text/javascript" src="./statics/js/thinksite/cnzz.js"></script>
            <br/>
            版权所有:南京甘池软件科技有限公司
        </div>
    </div>
</div>
<script src="http://www.thinksite.cn/statics/js/thinksite/baidu_js_push.js"></script>
<script type='text/javascript' src='http://tb.53kf.com/kf.php?arg=10004241&style=1'></script>
<!--留言弹出层-->
<!--反馈-->
<script language='javascript' src='http://www.thinksite.cn/index.php?m=formguide&c=index&a=show&formid=27&action=js&siteid=1'></script></body>

</html>