查找网上案例很多,但是都不是很满意,参考大牛案例终结了一下,话不多说代码如下:

实现效果:

前段代码

<view class="text-box">
<view>{{currentInput}}</view>
<textarea class="weui-textarea" placeholder="请输入文本" bindinput="getInput" maxlength="500"/>
</view>

css代码

.text-box{
width:750rpx;
padding: 20rpx 0;
box-sizing: border-box;
position: relative;
min-height:150rpx;
max-height:240rpx;
background: rgb(172, 253, 95)
}
.text-box view{
display:block;
visibility:hidden;
word-break:break-all;
word-wrap:break-word;
}
.text-box .weui-textarea{
width: 600rpx;
height:100%;
position: absolute;
left:75rpx;
top:0rpx;
overflow-y:hidden;
word-break:break-all;
word-wrap:break-word;
}

js代码

Page({
data:{
currentInput: ''
},
getInput: function (e) {
this.setData({
currentInput: e.detail.value
})
},
})

模拟微信朋友圈评论效果

    <view class="comment-reply-focus" v-else>
<view class="text-box">
<view>{{ currentInput }}</view>
<textarea
class="weui-textarea"
placeholder="评论 @一见生财"
focus="true"
@input="getInput"
maxlength="500"
fixed="true"
:show-confirm-bar="false"
:adjust-position="true"
cursor-spacing="20px"
/>
</view>
<view class="comment-reply-focus-send" @click.stop="sendComment()">发送</view>
</view>
.comment-reply-focus {
width: 100%;
position: relative;
padding-left: 40upx;
}
.text-box {
width: 580rpx;
padding: 20rpx 0;
box-sizing: border-box;
position: relative;
min-height: 80upx;
max-height: 160upx;
line-height: 40upx;
border: 1upx solid #e5e5e5;
border-radius: 5upx;
padding: 20upx;
}
.text-box view {
display: block;
visibility: hidden;
word-break: break-all;
word-wrap: break-word;
}
.text-box .weui-textarea {
width: 580upx;
height: 100%;
position: absolute;
left: 0upx;
top: 0upx;
overflow-y: hidden;
word-break: break-all;
word-wrap: break-word;
padding: 20upx;
} .comment-reply-focus-send {
width: 80upx;
height: 40upx;
line-height: 40upx;
font-size: 30upx;
text-align: center;
color: #e84351;
position: absolute;
right: 30upx;
bottom: 0upx;
}
export default {
data() {
return {
currentInput: ''
};
},
methods: {
getInput(e) {
this.currentInput = e.detail.value;
},
// 发送
sendComment() {
console.log(this.currentInput);
}
}
};

感兴趣的还可以查看:div模拟textarea文本域轻松实现高度自适应

参考链接:https://blog.csdn.net/liuwengai/article/details/78987957

小程序实现textarea行数自动增加的更多相关文章

  1. .Net_用控制台程序打印指定行数的三角型(面试题)

    .Net_用控制台程序打印指定行数的三角型(面试题)   下面是一个由*号组成的4行倒三角形图案.要求: 1.输入倒三角形的行数,行数的取值3-21之间,对于非法的行数,要求抛出提示“非法行数!”: ...

  2. 小程序实现textarea随输入的文字行数变化高度自动增加

    参考链接:https://blog.csdn.net/liuwengai/article/details/78987957 该实现方法是根据上面的链接改编为小程序的实现,代码如下: wxml: < ...

  3. 微信小程序 实现多行文字 超出部分省略号显示

    在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...

  4. 微信小程序文字超过行后隐藏并且显示省略号

    在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidd ...

  5. 微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理

    前言: 小程序开发中诸如获取用户手机号码.调起微信支付.领取卡券等api都是会有一定的延迟的.也就是说通过点击按钮调用这些api的时候,从点击按钮调用api,到支付页面或者领取卡券界面展示出来是需要一 ...

  6. Java50道经典习题-程序19 输入行数打印菱形图案

    题目:根据用户输入的行数打印菱形图案,若用户传入的是为偶数则提示用户重新输入,例如输入数字7打印出如下菱形图案   *  *** ************ *****  ***   *分析:先把图形分 ...

  7. 利用easyui的行编辑自动增加一行来进行增删有详细注解

    jQuery EasyUI 框架提供了创建网页所需的一切,帮助您轻松建立站点. easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 j ...

  8. 小技巧textbox的行数

    没什么技术含量,但如果不知道则实现起来很麻烦. c#中textbox.lines只记录回车的数量,并不是真正的总行数,如何得到呢,请使用: int 总行数 = this.textBox1.GetLin ...

  9. 微信小程序页面3秒后自动跳转

    setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式. 语法格式可以是以下两种:   setTimeout(function () { // wx.r ...

随机推荐

  1. 二、Navicat、IDEA、nopad、eclipse、excle工具使用、问题、快捷键

    1.Navicat工具: 目的:本地数据库与远程数据库之间数据导入导出 步骤1:文件--新建oracle链接/mysql的连接 步骤2:工具-选项:将本地oracle的bin\oci.dll 的路径复 ...

  2. webpack 4 脚手架搭建

    1.在cmd控制台安装环境  npm install express (这是一个本地服务器配置) 2.在src 文件夹下建 mian.js 和 express.js 两个jS文件

  3. JavaScript 转义字符

    转义字符是字符的一种间接表示方式.在特殊语境中,无法直接使用字符自身.例如,在字符串中包含说话内容. "子曰:"学而不思则罔,思而不学则殆."" 由于 Java ...

  4. MQTT 协议学习:001-搭建MQTT通信环境,并抓包测试

    背景 目的:了解MQTT 通信的有关概念与流程:方便推算某些数据与文档描述是否一致. 为了能够在保证学习质量的前提下,降低配置环境的门槛,我们将服务器搭建在windwos中,实行内网间的MQTT协议访 ...

  5. 深入 理解char * ,char ** ,char a[ ] ,char *a[] 的区别

    转自:https://blog.csdn.net/liusicheng2008_liu/article/details/80412586 1 数组的本质 数组是多个元素的集合,在内存中分布在地址相连的 ...

  6. esxi 版本升级命令

    先把zip文件通过XShell或者WinSCP上传到esxi服务器上面去,然后执行以下命令,完成升级并重启就可以了.

  7. PAN3501与AS3933完美兼容替代

    现在不少校园门禁卡都是采用奥地利的AS3933,市场需求是供不应求,当然价格上还是不断上升趋势.成本上压力也是越来越大,不少厂家在寻找能替代软硬件兼容AS3933的芯片方案.今天我就为大家介绍一款能否 ...

  8. xfpt 连接Linux失败问题

    首先切换到root用户 1. su 未设置root密码的可以使用一下命令 sudo passwd root 一.上传文件失败(一动不动) 1.安装ftp服务 apt-get install vsftp ...

  9. 01 vue入门

    vue简介 官网上有介绍,这里粘出来 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心 ...

  10. RDD 可视化 —— RDDOperationScope.withScope

    最近在看各种博客,学习 spark 源代码. 网上对源代码的分析基本都是基于 0.7, 0.8, 1.0 的代码,而现在的发行版已经是 1.5 了.所以有些代码不大对的上.比如函数 RDD.map() ...