javascript - JS - 如何根据从其他 textarea 输入镜像的输入文本自动调整 textarea 的大小?
问题描述
我试图实现 textarea 高度根据从输入 textarea 镜像到的文本长度自动调整。你能看看可能是哪里的问题吗?谢谢您的帮助。
http://jsfiddle.net/wshuni/vjwe39ah/93/
var titleInput = document.querySelector("#titleInput");
var bodyInput = document.querySelector("#bodyInput");
var title = document.querySelector("#title");
var body = document.querySelector("#body");
title.addEventListener('keydown', autosize);
body.addEventListener('keydown', autosize);
titleInput.addEventListener('keydown', autosize);
bodyInput.addEventListener('keydown', autosize);
function autosize(){
var el = this;
setTimeout(function(){
el.style.cssText = 'height:auto; padding:0';
// for box-sizing other than "content-box" use:
// el.style.cssText = '-moz-box-sizing:content-box';
el.style.cssText = 'height:' + el.scrollHeight + 'px';
},0);
}
var input = document.querySelector("#titleInput");
var mirror = document.querySelector("#title");
var bodyInput = document.querySelector("#bodyInput");
var bodyMirror = document.querySelector("#body");
input.addEventListener('input', function(event) {
mirror.innerText = event.target.value;
});
bodyInput.addEventListener('input', function(event) {
bodyMirror.innerText = event.target.value;
});
解决方案
您应该在正文类中删除固定高度,并在复制文本后立即更新镜像文本区域的高度。
var titleInput = document.querySelector("#titleInput");
var bodyInput = document.querySelector("#bodyInput");
titleInput.addEventListener('keydown', autosize);
bodyInput.addEventListener('keydown', autosize);
function autosize(){
var el = this;
el.style.cssText = 'height:auto; padding:0';
// for box-sizing other than "content-box" use:
// el.style.cssText = '-moz-box-sizing:content-box';
el.style.cssText = 'height:' + el.scrollHeight + 'px';
}
var input = document.querySelector("#titleInput");
var mirror = document.querySelector("#title");
var bodyInput = document.querySelector("#bodyInput");
var bodyMirror = document.querySelector("#body");
input.addEventListener('input', function(event) {
mirror.innerText = event.target.value;
mirror.style.cssText = 'height:' + mirror.scrollHeight + 'px';
});
bodyInput.addEventListener('input', function(event) {
bodyMirror.innerText = event.target.value;
bodyMirror.style.cssText = 'height:' + bodyMirror.scrollHeight + 'px';
});
.frame {
width: 343px;
height: 114px;
background: rgb(255, 255, 255);
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1),
0px 2px 5px 0px rgba(0, 0, 0, 0.15);
border-radius: 8px;
}
.title {
font-family: Inter-SemiBold;
position: relative;
font-size: 16px;
color: #21416C;
font-weight: 600;
height: 20px;
line-height: 20px;
width: 291px;
word-wrap: break-word;
border: none;
resize: none;
}
.body {
font-family: Inter-Regular;
position: relative;
font-size: 14px;
color: #5C7999;
font-weight: normal;
/*height: 16px;*/
line-height: 18px;
width: 311px;
word-wrap: break-word;
border: none;
resize: none;
}
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1),
0px 2px 5px 0px rgba(0, 0, 0, 0.15);
transition: 0.3s;
width: 343px;
border-radius: 8px;
background: #FFFFFF;
height: auto;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.containerTitle {
padding-top: 14px;
padding-right: 36px;
padding-bottom: 0px;
padding-left: 16px;
}
.containerBody {
padding-top: 2px;
padding-right: 16px;
padding-bottom: 16px;
padding-left: 16px;
}
i {
color: #1A67D2;
font-size: 24px !important; /* 24px preferred icon size */
position: absolute;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 78px;
padding-left: 307px;
}
<body style="background-color:#1A67D2;">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="containerTitle">
<textarea id="titleInput" rows='1' type="text" class="title" placeholder="Add title text..."></textarea>
</div>
<div class="containerBody">
<textarea id="bodyInput" rows='1' type="text" class="body" placeholder="Add body text..."></textarea>
</div>
<div class="card">
<i class="material-icons">close</i>
<div class="containerTitle">
<textarea id="title" disabled rows='1' type="text" class="title" placeholder="Mirrored text - title..."></textarea>
</div>
<div class="containerBody">
<textarea id="body" disabled rows='1' type="text" class="body" placeholder="Mirrored text - body..."></textarea>
</div>
</div>
</body>
推荐阅读
- swift - 即使在添加 indexOn 之后,Firebase 安全规则也会继续询问“考虑添加“.indexOn”:”
- html - 仅为一个伪类转换?
- reactjs - 在 useEffect 中反应上下文方法
- flutter - Flutter 中 createState() 和 return StateObject() 的区别
- clang - 当只有一个文件被索引时,`clangd` 如何知道函数定义在哪里?
- http-live-streaming - HLS 协议:获取直播期间的绝对经过时间
- c# - 如何搜索 xml 节点值,然后在 c# 中为该元素创建新属性
- python - 在数组上调节 pandas 数据框
- javascript - 如何动态更改 SVG 填充颜色?
- spacy - 处理重叠匹配的 spacy matcher