欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《十六》textarea多行输入框

发布：2018-01-25 16:30浏览： 次来源：网络 作者：tianshu

组件说明:

textarea 多行输入框。


效果展示:

属性效果图：


小程序极速实战开发《十六》textarea多行输入框(图1)

 


代码：
wxml

  1. <view class="content">
  2. placeholder：
  3. <textarea placeholder="占位符" />
  4. <textarea placeholder="占位符 改变样式style" placeholder-style=
  5. "color:blue"/>
  6. <textarea placeholder="占位符 改变样式class" placeholder-class="placeholdText"/>
  7. </view>

wxss

  1. .content{
  2.   border:1px black solid;
  3.   margin: 10px;
  4.   font-size: 10pt;
  5.   padding: 10px;
  6. }
  7. textarea{
  8.   border: 1px red solid;
  9.   margin: auto;
  10.   width:100%;
  11.   height: 3em; 
  12.   margin-top:5px;
  13.   padding: 3px;
  14. }
  15. /*占位符样式*/
  16. .placeholdText{
  17.   font-size: 2em;
  18. }

事件效果图：

小程序极速实战开发《十六》textarea多行输入框(图2)



wxml:

 

  1. <view class="content">
  2. auto-height：
  3. <textarea  auto-height placeholder="自动增高，style.height不生效"/>
  4. bindinput="当内容改变"
  5. <textarea  placeholder="" bindlinechange="bindlinechange"/>
  6. bindfocus:当获取焦点
  7. <textarea  placeholder="当获取焦点" value="" bindfocus="bindfocus"/>
  8. bindblur：当失去焦点触发
  9. <textarea  placeholder="当失去焦点" bindblur="bindblur"/>
  10. </view>
  11. 事件触发：
  12. <view class="content"  style="color:blue">
  13. {{log}}
  14. </view>

js:

  1. Page({
  2.   data:{
  3.     log:'事件触发'
  4.   },
  5.   //行高改变时
  6.   bindlinechange:function(e){
  7.     var height=e.detail.height;
  8.     var heightRpx=e.detail.heightRpx;
  9.     var lineCount=e.detail.lineCount;
  10.     this.setData({
  11.       log:"height="+height+"  |  heightRpx="+heightRpx+"  |  lineCount="+lineCount
  12.     })
  13.   },
  14.     //文本失去焦点
  15.   bindblur:function(e){
  16.     var value=e.detail.value;
  17.      this.setData({
  18.       log:"bindblur失去改变.获取textarea值="+value
  19.     })
  20.   },
  21.    //文本获取焦点
  22.   bindfocus:function(e){
  23.     var value=e.detail.value;
  24.      this.setData({
  25.       log:"bindfocus获取焦点,获取textarea值="+value
  26.     })
  27.   }
  28. })

wxss:

  1. .content{
  2.   border:1px black solid;
  3.   margin: 10px;
  4.   font-size: 10pt;
  5.   padding: 10px;
  6. }
  7. textarea{
  8.   border: 1px red solid;
  9.   margin: auto;
  10.   width:100%;
  11.   height: 3em; 
  12.   margin-top:5px;
  13.   padding: 3px;
  14. }

组件属性：
属性
描述
类型
默认值
value 初始内容 String  
placeholder 占位符 String  
placeholder-style 指定 placeholder 的样式 String  
placeholder-class 指定 placeholder 的样式类 String textarea-placeholder
disabled 是否禁用 Boolean false
maxlength 最大输入长度，设置为 0 的时候不限制最大长度 Number 140
auto-focus 自动聚焦，拉起键盘。页面中只能有一个 input 或 textarea标签时， 设置 auto-focus 属性 Boolean false
focus 获取焦点（当前开发工具暂不支持） Boolean false
auto-height 是否自动增高，设置auto-height时，style.height不生效 Boolean false
bindfocus 输入框聚焦时触发event.detail = {value: value} EventHandle  
bindblur 输入框失去焦点时触发event.detail = {value: value} EventHandle  
bindlinechange 输入框行数变化时调用event.detail = {height: 0, heightRpx: 0, lineCount: 0} EventHandle  
属性解析：

wxml

  1. <!--=======属性=======-->
  2. <!--value：输入框内容-->
  3. <textarea value="内容"/>
  4. <!--placeholder：占位符，对输入框内容提示-->
  5. <textarea placeholder="占位符" placeholder-class="占位符静态样式"   placeholder-style="占位符动态样式"/>
  6. <!--disabled：控制标签有效,或者失效状态，在失效状态，不能获取该值-->
  7. <textarea disabled="true"/>
  8. <textarea disabled/> 等同于 <textarea disabled="false"/> 
  9. <!--maxlength:内容长度限制,默认140-->
  10. <textarea  maxlength="100"/>
  11. <textarea  maxlength/> 等同于 <textarea  maxlength="140"/>
  12. <!--focus:初始化时，获取输入焦点(目前开发工具暂不支持)-->
  13. <textarea  focus="true"/>
  14. <textarea focus/> 等同于 <textarea focus="false"/>
  15. <!--auto-focus：当界面只有一个textarea,自动获取焦点-->
  16. <textarea   auto-focus="true"/>
  17. <textarea   auto-focus/> 等同于 <textarea auto-focus="false"/>
  18. <!--auto-height：是否自动增高，设置auto-height时，style.height不生效-->
  19. <textarea  auto-height="true"/>
  20. <textarea  auto-height/> 等同于 <textarea auto-height="false"/>
  21. <!--=======事件=======-->
  22. <!--bindlinechange:输入框行数变化时调用 返回参数：height,heightRpx,lineCount-->
  23. <textarea bindlinechange="自己定义函数名"/>
  24. <!--bindfocus:当获取焦点，可用输入状态时触发-->
  25. <textarea bindfocus="自己定义函数名"/>
  26. <!--bindblur：当失去焦点触发-->
  27. <textarea bindblur="自己定义函数名"/>





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有