javascript - 创建一个随文本量调整大小的文本区域(普通 JS，无 JQuery)

Question

这里是服务器端开发人员，希望涉足一些普通 JS 来学习诀窍。

这个问题是关于创建一个表单，其中textareas最初隐藏在按钮点击后面，并且随着输入的文本变大，它也会调整大小。对于我这个级别的人来说，这是一个具有挑战性的问题，我正在尝试自己编写代码以供学习。

<小时/>

这是我到目前为止所做的事情。

想象一个用户提交文本内容的论坛。每个提交的内容下面都有一个“回复”按钮。按下该按钮会打开一个简单的文本区域，人们可以在其中输入自己的回复。我编写了简单的 JS 来完成此任务:

var replyBtns = document.querySelectorAll('[id=rep]');

for(var i = 0; i < replyBtns.length; i++) {
 replyBtns[i].addEventListener('click', function(e) {
   e.preventDefault();
   var textarea = document.getElementById("reply-message");
   if (textarea) { textarea.parentNode.removeChild(textarea); }
   var replyBox = document.createElement('textarea');
    replyBox.setAttribute('id', 'reply-message');
    replyBox.setAttribute('placeholder', 'Reply');
   this.parentNode.insertAdjacentElement('beforeend', replyBox);
 }, false);
}

如您所见，该 JS 创建了一个文本区域并将其添加到 HTML 中。与之配套的 CSS 是:

textarea#reply-message {
  display: block;
  border: none;
  color:#306654;
  font-size:120%;
  padding: 5px 10px;
  line-height: 20px;
  width:550px;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
  resize: none;
}

这很有效。

<小时/>

我的下一个努力是在文本开始溢出时调整此 textarea 的大小。为此，我采取这条路线:

• 抓取加载到textarea中的内容

• 创建一个不可见的克隆 div

• 为克隆提供与 textarea 相同的宽度和排版属性

• 将内容放入克隆中

• 获取克隆的高度

• 将克隆的高度应用于文本区域的高度

此策略使用任何 div 元素自然拉伸(stretch)以适应其内容高度的属性(假设没有 float 或绝对定位元素)。我将这项技术归功于 this博客文章。

这是实现上述技术的 JS:

let txt = document.getElementById('reply-message'),
    hiddenDiv = document.createElement('div'),
    content = null;

hiddenDiv.classList.add('hiddendiv');

document.body.appendChild(hiddenDiv);

txt.addEventListener('keyup', function () {

  content = this.value;
  hiddenDiv.innerHTML = content + '\n\n';
  this.style.height = hiddenDiv.getBoundingClientRect().height + 'px';

}, false);

其中 hiddendiv 是:

.hiddendiv {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  white-space: pre-wrap;
  width: 550px;
  height: 20px;
  font-size: 120%;
  padding: 5px 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

但事实是，我需要这个 JS 片段仅在 textarea 实际存在时运行。

目前，我让它在页面加载时运行，但它无法产生任何效果，因为 textareas 尚不存在。如何确保它仅在创建后运行？作为 JS 的新手，这完全让我困惑。请指教。

Answer 1

这并不能完全回答您的问题，而是稍微重组您的代码以获得相同的结果。

您应该在创建事件监听器时将其添加到 textarea 中，然后再将其添加到页面中。

在你的第一个 JavaScript 中插入这样的代码:

replyBox.setAttribute('placeholder', 'Reply');
replyBox.addEventListener('keyup', function () {
    /* do event handling here */
}, false);

处理所有这些问题的一种更简洁的方法是将所有与设置 textarea 相关的代码移至单独的函数中。

function setUpReplyBox(replyBox) {
    replyBox.setAttribute('id', 'reply-message');
    replyBox.setAttribute('placeholder', 'Reply');

    hiddendiv.createElement('div');
    content = null;

    hiddendiv.classList.add('hiddendiv');
    document.body.appendChild(hiddenDiv);

    replyBox.addEventListener('keyup', function () {
        content = this.value;
        hiddenDiv.innerHTML = content + '\n\n';
        this.style.height = hiddenDiv.getBoundingClientRect().height + 'px';
    }, false);
}

创建项目后立即调用此方法，位于

var replyBox = document.createElement('textarea');
setUpReplyBox(replyBox);
this.parentNode.insertAdjacentElement('beforeend', replyBox);