微信小程序组件：textarea多行输入框解读和分析

textarea 多行输入框。

textarea多行输入框示例代码运行效果如下：

下面是WXML代码：

placeholder：<textarea placeholder="占位符 改变样式style" placeholder-style="color:blue"/><textarea placeholder="占位符 改变样式class" placeholder-class="placeholdText"/></view></pre><p style="text-align: left;">下面是WXSS代码：</p><pre>.content{  border:1px black solid;  margin: 10px;  font-size: 10pt;  padding: 10px;}textarea{  border: 1px red solid;  margin: auto;  width:100%;  height: 3em;  margin-top:5px;  padding: 3px;}/*占位符样式*/.placeholdText{  font-size: 2em;}</pre><p style="text-align: left;">textarea多行输入框的事件效果图：</p><p style="text-align: left;"></p><p style="text-align: left;">下面是WXML代码：:</p><pre><view class="content">auto-height：<textarea  auto-height placeholder="自动增高，style.height不生效"/>bindinput="当内容改变"<textarea  placeholder="" bindlinechange="bindlinechange"/>bindfocus:当获取焦点<textarea  placeholder="当获取焦点" value="" bindfocus="bindfocus"/>bindblur：当失去焦点触发<textarea  placeholder="当失去焦点" bindblur="bindblur"/></view>事件触发：<view class="content"  style="color:blue">{{log}}</view></pre><p style="text-align: left;">下面是JS代码：:</p><pre>Page({  data:{    log:'事件触发'  },  //行高改变时  bindlinechange:function(e){    var height=e.detail.height;    var heightRpx=e.detail.heightRpx;    var lineCount=e.detail.lineCount;    this.setData({      log:"height="+height+"  |  heightRpx="+heightRpx+"  |  lineCount="+lineCount    })  },    //文本失去焦点  bindblur:function(e){    var value=e.detail.value;     this.setData({      log:"bindblur失去改变.获取textarea值="+value    })  },   //文本获取焦点  bindfocus:function(e){    var value=e.detail.value;     this.setData({      log:"bindfocus获取焦点,获取textarea值="+value    })  }})</pre><p style="text-align: left;">下面是WXSS代码：:</p><pre>.content{  border:1px black solid;  margin: 10px;  font-size: 10pt;  padding: 10px;}textarea{  border: 1px red solid;  margin: auto;  width:100%;  height: 3em;  margin-top:5px;  padding: 3px;}</pre><p style="text-align: left;"></p><p style="text-align: left;">属性解析：</p><p style="text-align: left;">下面是WXML代码：</p><pre>

<textarea value="内容"/>
<textarea placeholder="占位符" placeholder-class="占位符静态样式"   placeholder-style="占位符动态样式"/>
<textarea disabled="true"/><textarea disabled/> 等同于 <textarea disabled="false"/>
<textarea  maxlength="100"/><textarea  maxlength/> 等同于 <textarea  maxlength="140"/>
<textarea  focus="true"/><textarea focus/> 等同于 <textarea focus="false"/>
<textarea   auto-focus="true"/><textarea   auto-focus/> 等同于 <textarea auto-focus="false"/>
<textarea  auto-height="true"/><textarea  auto-height/> 等同于 <textarea auto-height="false"/>

<textarea bindlinechange="自己定义函数名"/>
<textarea bindfocus="自己定义函数名"/>
</pre><p>以上就是 微信小程序组件：textarea多行输入框解读和分析的详细内容，更多请关注 第一PHP社区 其它相关文章！</p>    </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-8931-1.html">微信小程序组件：action-sheet显示操作菜单解读和分析</a></div>
                    <div>下一篇：<a href="http://www.thinksite.cn/show-45-8933-1.html">微信小程序组件：switch开关选择器解读和分析</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>12</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=8932&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="8932"
            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>