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

Textarea多行输入框组件描述:

Textarea多行输入框。

Textarea多行输入框示例代码运行如下:

以下是WXML代码:

& ltview class = & quot内容& quot& gt占位符:& lttextarea占位符= & quot占位符"/>；& lttextarea占位符= & quot占位符更改样式style & quotplaceholder -style = & quot；颜色:蓝色& quot/& gt；& lttextarea占位符= & quot占位符更改样式类& quotplaceholder -class = & quot；placeholdText & quot/& gt；& lt/view & gt；以下是WXSS代码:

。content{ border:1px黑色固体；边距:10pxfont -size:10pt；填充:10px}textarea{ border: 1px红色实心；边距:自动；宽度:100%；身高:3emmargin -top:5px；填充:3px}/*占位符样式*/。placeholdText { font -size:2em；}textarea多行输入框的事件效果图:

以下是WXML代码:

& ltview class = & quot内容& quot& gtauto -高度:& lttextarea auto -height placeholder = & quot；自动加高，style.height不生效"/& gt；bindinput = & quot当内容改变时" & lttextarea占位符= & quot"bindlinechange = & quotbindlinechange & quot/& gt；Bindfocus:获得焦点时

页面({数据:{日志:& # 039；触发事件& # 039；}，//bindline change:function(e){ var height = e . detail . height；var height rpx = e . detail . height rpx；var line count = e . detail . line count；this . setdata({ log:& quot；height = & quot+高度+& quot；| heightRpx = & quot+height rpx+& quot；| lineCount = & quot+lineCount }) }，//文本失去焦点bind blur:function(e){ var value = e . detail . value；this . setdata({ log:& quot；Bindblur丢失了更改。获取文本区域值= & quot+value }) }，//获取文本的焦点bind focus:function(e){ var value = e . detail . value；this . setdata({ log:& quot；Bindfocus获取焦点并获取textarea value = & quot+value}}})下面是WXSS代码:

。content{ border:1px黑色固体；边距:10pxfont -size:10pt；填充:10px}textarea{ border: 1px红色实心；边距:自动；宽度:100%；身高:3emmargin -top:5px；填充:3px}

属性解析:

以下是WXML代码:

& lt！--= = =属性= = = = = = -->；& lt！--值:输入框内容-->；& lttextarea value = & quotcontent "/>；& lt！--占位符:占位符，提示--输入框的内容>:& lttextarea占位符= & quotplaceholder -class = & quot；占位符静态样式" placeholder -style = & quot；占位符动态样式"/>；& lt！--禁用:控制标签有效或无效。无效状态下，无法获得--的值>:& lt禁用的文本区域= & quottrue & quot/& gt；& lttextarea disabled/& gt；相当于:& lttextarea maxlength = & quot100 & quot/& gt；& lttextarea maxlength/& gt；相当于:& lttextarea焦点= & quottrue & quot/& gt；& lttextarea focus/& gt；相当于:& lttextarea auto -focus = & quot；true & quot/& gt；& lttextarea auto-focus/>相当于:& lttextarea auto -height = & quot；true & quot/& gt；& lttextarea auto-height/>相当于；& lt！--bindlinechange:输入框行数变化时调用返回参数:height，height RPX，line count -->；& lttextarea bindlinechange = & quot自己定义函数名"/& gt；& lt！--bindfocus:获得焦点且输入状态可用时触发-4 >:& lt；textarea bindfocus = & quot自己定义函数名"/& gt；& lt！--bindblur:焦点丢失时触发-4 +& gt；