jquery 如何在WordPress中自动调整文本区域大小

u5i3ibmn  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(145)

我想我的<textarea>自动调整大小,而我的wordpress网站上写评论。
我试过使用不同教程中的js和jquery解决方案,但似乎都不起作用。起初我以为我的script.js没有正确链接,但我可以在源代码中找到它。我试过将<textarea>转换为<div contenteditable= true>,但由于某种原因,wordpress无法检测到文本,因此它不允许我使用此解决方案发表评论

mpbci0fu

mpbci0fu1#

如果你想让文本区域在用户输入文本区域时垂直调整大小,你可以使用来自文本区域oninput事件的scrollheight来设置文本区域的高度。
参见下面的示例...

// our oninput comment textarea resize function
function commentResize(textarea) {

  // reset style height to auto in order to get the current height of content
  textarea.style.height = "auto";
  
  // set the new height based on the comment textarea scroll height
  textarea.style.height = textarea.scrollHeight + "px";
  
}
.comment-textarea {
  height: 34px; /* set initial height */
  resize: none; /* stop manual resizing */
  overflow: hidden; /* hide scrollbars */
}
<textarea class="comment-textarea" oninput="commentResize(this)"></textarea>

这是一个jsFiddle版本。https://jsfiddle.net/joshmoto/7wv6eo3q/

r7knjye2

r7knjye22#

我试过把它变成,但由于某种原因,WordPress无法检测到文本...
最好的办法就是找到这个理由。但如果你不知道如何或不想,有一个快速的“黑客”*,可以在这里完成。
您将保留textarea,但将添加一个类来隐藏它。
然后,将div contenteditable添加到它旁边。
最后,下面的脚本将真实的地将文本内容从div复制到textarea
因此,在提交时,文本区域将像以前一样包含一些内容。
它将为一个或多个“替换”工作。
输入下面的蓝色div...;)

document
  .querySelectorAll(".textareaReplacement")
  .forEach((textareaReplacement) =>
    textareaReplacement.addEventListener("keyup", (event) => {
      event.currentTarget.previousSibling.value = event.currentTarget.innerText;
    })
  );
.replaced {
  /* Uncomment that display none. It was necessary to be visible in this demo */
  /* display: none */
}
.textareaReplacement {
  /* Style that div to look good */
  border: 1px solid blue;
  width: 300px;
}
<textarea class='replaced'></textarea><div class='textareaReplacement' contenteditable='true'></div>

相关问题