@Maminumemonta0706 (もんた。)posted at 2022-08-31

textareaの高さを自動でリサイズする方法

Q&A

Closed

JavaScript jQuery textarea

解決したいこと

現在Go言語で掲示板の開発に取り組んでいます。
下の画像のように1行だけの投稿の時に、テキストの下に空白ができないようにしたいです。

発生している問題

現在以下のようなコードでテキストエリアの高さを内容によって変わるようにしています。

    $(".thread-form").each(function(){
      $('.thread-form').on('change keyup keydown paste cut', function(){
      if ($(this).outerHeight() > this.scrollHeight){
        $(this).height(1)
      }
      while ($(this).outerHeight() < this.scrollHeight){
        $(this).height($(this).height() + 1)
      }
    });

一部省略していますが、テキストエリアは以下のコードで書いています。

<form role="form" action="" method="POST">
    <textarea class="thread-form" name="content" id="thread-content" placeholder="ここにテキストを入力してね。(140字以内)">{{.Content}}</textarea>
</form>

.thread-form {
  width: 100%;
  height: auto;
  display: block;
  border-bottom: solid 1px black;
  padding: 0.6% 0.6% 0 0.6%;
  margin-bottom: 8px;
  background-color: rgb(181, 255, 158);
}

自分で試したこと

以下のようにインナーの高さ、アウターの高さ、scrollHeight、cssで指定している高さを取得してheight()で変えようとしてみましたが、高さが固定されており変更できませんでした。

    var scrollHeight = $(".thread-form").get(0).scrollHeight;
    var outerHeight = $(".thread-form").outerHeight();
    var height = $(".thread-form").height();
    var innerHeight = $(".thread-form").innerHeight();
    var css = $(".thread-form").css('height');

1Answer

@akebi_mh posted at 2022-08-31

ちょっと強引な気もしますが、こんな感じではどうでしょう。

sample.html

<style>
.thread-form {
  width: 100%;
  height: 0;
  display: block;
  border-bottom: solid 1px black;
  padding: 0.6% 0.6% 0 0.6%;
  margin-bottom: 8px;
  background-color: rgb(181, 255, 158);
  overflow: hidden;
  resize: none;
}
</style>

<textarea class="thread-form" name="content" id="thread-content1" placeholder="ここにテキストを入力してね。(140字以内)"></textarea>
<textarea class="thread-form" name="content" id="thread-content2" placeholder="ここにテキストを入力してね。(140字以内)"></textarea>
<textarea class="thread-form" name="content" id="thread-content3" placeholder="ここにテキストを入力してね。(140字以内)"></textarea>

<script>
'use strict';
const autoResizeTextarea = e => {
  const s = getComputedStyle(e);
  e.style.height = 0;
  e.style.height = `${e.scrollHeight + parseInt(s.marginTop) + parseInt(s.marginBottom)}px`;
};
document.querySelectorAll('.thread-form').forEach(e => autoResizeTextarea(e));
document.addEventListener('input', e => {
  if(!e.target.classList.contains('thread-form')) return;
  autoResizeTextarea(e.target);
});
</script>

1Like

Comments

@Maminumemonta0706
Questioner
ありがとうございます！試してみます！
@Maminumemonta0706
Questioner
うまくいきました！本当にありがとうございます！

Are you sure you want to delete the question?