小程序实现textarea随输入的文字行数变化高度自…
2018-07-09 13:47:51来源:博客园 阅读 ()
参考链接:https://blog.csdn.net/liuwengai/article/details/78987957
该实现方法是根据上面的链接改编为小程序的实现,代码如下:
wxml:
<view class="text-box"> <text>{{currentInput}}</text> <textarea class="weui-textarea" placeholder="请输入文本" bindinput="getInput" maxlength="1000"/> </view>
wxss:
.text-box{ width:100%; position: relative; min-height:80rpx; margin-top:17rpx; } .text-box text{ display:block; visibility:hidden; word-break:break-all; word-wrap:break-word; } .text-box .weui-textarea{ height:100%; position: absolute; left:0; top:0; overflow-y:hidden; word-break:break-all; word-wrap:break-word; }
js:
Page({ data: { currentInput:'' }, getInput:function(e){ this.setData({ currentInput: e.detail.value }) } })
实现效果如图:
提醒:默认textarea应该是200个字,如果想要增加字数限制,使用maxlength属性
扩展:如果想给textarea输入的文字加删除线,只需把text的
visibility:hidden; 属性去掉,给textarea加一个透明的颜色就可以了。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:清除浮动
下一篇:区别值类型数据和引用类型数据
- js防止表单重复提交实现代码 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- js实现翻页后保持checkbox选中状态的实现方法 2020-03-25
- NiftyCube实现圆角边框的方法 2020-03-20
- 微信小程序开发图片拖拽实例详解 2020-03-16
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash