微信小程序组件textarea多行输入框的示例分析
这篇文章给大家分享的是有关 微信小程序组件textarea多行输入框的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联-专业网站定制、快速模板网站建设、高性价比双城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式双城网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖双城地区。费用合理售后完善,十多年实体公司更值得信赖。
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:'事件触发' }, //行高改变时 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 }) } })
下面是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多行输入框的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
网站栏目:微信小程序组件textarea多行输入框的示例分析
URL链接:http://pwwzsj.com/article/jsgojd.html