微信小程序组件textarea多行输入框的示例分析

这篇文章给大家分享的是有关 微信小程序组件textarea多行输入框的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

textarea多行输入框组件说明:

textarea 多行输入框。

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

下面是WXML代码：

placeholder：

下面是WXSS代码：

.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多行输入框的事件效果图：

下面是WXML代码：:

auto-height：

bindinput="当内容改变"

bindfocus:当获取焦点

bindblur：当失去焦点触发


事件触发：

{{log}}

下面是JS代码：:

Page({
  data:{
    log:&＃39;事件触发&＃39;
  },
  //行高改变时
  bindlinechange:function(e){
    var height=e.detail.height;
    var heightRpx=e.detail.heightRpx;
    var lineCount=e.detail.lineCount;
    this.setData({
      log:"  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
    })
  }
})

下面是WXSS代码：:

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

属性解析：

下面是WXML代码：

 等同于 


 等同于 


 等同于 


 等同于 


 等同于 

感谢各位的阅读！关于“ 微信小程序组件textarea多行输入框的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！