JS - 如何根据从其他文本区域输入的文本自动调整文本区域的大小？

Question

JS - 如何根据从其他文本区域输入的文本自动调整文本区域的大小？

3

我正在尝试根据从输入文本区域中反映出的文本长度自动调整文本区域的高度。您能否看一下可能存在的问题？谢谢您的帮助。

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

- Shuni

文本区域元素不会自动调整大小，除非您指示它这样做。使用相同的事件来测量输入元素的大小，并将文本区域元素调整为相同的高度。 - FDavidov

2个回答

1

你可以在同一个函数中设置 bodyMirror 文本区域的样式来实现此操作，该函数也用于调整 bodyInput 文本区域的大小。

var bodyMirror = document.querySelector("#body");

function autosize(){
  var el = this;
  setTimeout(function(){
    el.style.cssText = 'height:auto; padding:0';
    el.style.cssText = 'height:' + el.scrollHeight + 'px';
    bodyMirror.style.cssText =  'height:auto; padding:0';
    bodyMirror.style.cssText =  'height:' + el.scrollHeight + 'px';
  },0);
}

- ipmanlk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lety · Accepted Answer

你应该移除body类中的固定高度，并在复制文本后立即更新镜像文本区域的高度。

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>