博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序实现textarea随输入的文字行数变化高度自动增加
阅读量:7029 次
发布时间:2019-06-28

本文共 836 字,大约阅读时间需要 2 分钟。

该实现方法是根据上面的链接改编为小程序的实现,代码如下:

wxml:

{
{currentInput}}
</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加一个透明的颜色就可以了。
透明颜色:color:rgba(52, 52, 52,0.5);

 

转载于:https://www.cnblogs.com/beileixinqing/p/9284149.html

你可能感兴趣的文章
Apache Mahout 简介
查看>>
移动端真机调试方法
查看>>
Java基础-关于session的详细解释
查看>>
洛谷P4364 IIIDX
查看>>
程序员恶搞图片===爆笑中......娱乐一下.....
查看>>
Debian 7.0.0 安装教程图解
查看>>
普通用户加sudo权限
查看>>
Linq 处理 List数据
查看>>
VISTA下的.NET2005 WEB应用程序
查看>>
WCF 第六章 序列化和编码 使用代理序列化类型
查看>>
暑假周总结四
查看>>
我的Android进阶之旅------>Android疯狂连连看游戏的实现之实现游戏逻辑(五)
查看>>
RESTful 架构详解
查看>>
windows修复分区卷:chkdsk
查看>>
面向对象编程---图片轮播
查看>>
git 使用遇到的问题
查看>>
数据结构之【队列】
查看>>
黑马程序员—Socket 网络编程有感
查看>>
磁盘管理
查看>>
Algs4-2.3.20非递归的快速排序
查看>>