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

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新的小程序开发环境和开发者生态。

textarea多行输入框组件说明:

textarea 多行输入框。

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

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

下面是WXML代码：

<view class="content">
placeholder：
<textarea placeholder="占位符" />
<textarea placeholder="占位符 改变样式style" placeholder-style=
"color:blue"/>
<textarea placeholder="占位符 改变样式class" placeholder-class="placeholdText"/>
</view>

.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; }

textarea多行输入框的事件效果图：

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

下面是WXML代码：:

<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>下面是JS代码：:
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+"    关键词：微信小程序组件：textarea多行输入框解读与区分