小程序/网页实现textarea高度随内容自动改变

站长手记作者： 2024-08-28 06:00:01

textarea默认的高度不是对着内容变化，而是随着内容增多，出现了滚动条。目前的需求是实现一个能够输入的textarea，并且高度跟着内容变化。以及小程序的textarea高度随内容自动改变的实现

需求

原理：

html结构：

<div class="body">
<div class="container">
<pre class="pre"><span /><br /><br /></pre>
<textarea class="content" placeholder="请输入内容" oninput="changeContent()"></textarea>
</div>
</div>

样式：

.container{
position: relative;
}
.content{
position:absolute;
top:0;
left:0;
height:100%;
background: transparent;
outline:0;
resize:none;
overflow:hidden;
}
.container pre {
display:block;
visibility:hidden;
}

js实时把textarea内容写入到pre：

function changeContent(){
var $textarea = document.getElementsByClassName('content');
var $pre = document.getElementsByClassName('pre');
$pre[0].innerHTML = $textarea[0].value;
}

简陋的源码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container{
position: relative;
}
.content{
position:absolute;
top:0;
left:0;
height:100%;
background: transparent;
outline:0;
font-size: inherit;
color: inherit;
line-height: inherit;
text-indent: inherit;
letter-spacing: inherit;
resize:none;
overflow:hidden;
}
.container pre {
display:block;
visibility:hidden;
}
</style>
</head>
<body>
<div class="body">
<div class="container">
<pre class="pre"><span /><br /><br /></pre>
<textarea class="content" placeholder="请输入内容" oninput="changeContent()"></textarea>
</div>
</div>
<script>
function changeContent(){
var $textarea = document.getElementsByClassName('content');
var $pre = document.getElementsByClassName('pre');
$pre[0].innerHTML = $textarea[0].value;
}
</script>
</body>
</html>

使用oninput而不是onchange的原因：

小程序中的实现

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

.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;
}

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

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_69965.html

小程序/网页实现textarea高度随内容自动改变

需求

原理：

html结构：

样式：

js实时把textarea内容写入到pre：

简陋的源码

使用oninput而不是onchange的原因：

小程序中的实现

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签