javascript: 改行数をJSで制限したい。

Question

#実現したいこと
前提
div contenteditableを使って、div要素をinputやtextareaみたいに入力出来るようにしました。

実現したいこと
js側で改行数を5行までに制限して、それ以上超える場合は要素内でスクロールするようにしたい。

困っていること

• js側で、改行数を指定しているのに制御出来ない
• 改行したときにフォームの幅が変わらなく困っています。

色々私なりに試してはいるのですが、どうしても意図した動きにならないです。
何かご教示いただけると幸いです。

<div aria-multiline="true" class="txt-area" contenteditable="true" id="dmComposerTextInput" role="textbox" spellcheck="true" tabindex="0" style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;">
</div>

.txt-area{
  background: lightgray;
  line-height: 30px;
  font-size: 20px;
  height:30px;
  width:200px;
  border: 2px solid;
  border-color: #1da1f2;
}

    var tBox = document.getElementById("dmComposerTextInput");
    tbox.on("keyup", function () {
        if (tBox.innerText.length > 5) {
            tBox.prop("contenteditable", false);
        }
    });

Answer 1

.txt-area{
  background: lightgray;
  line-height: 30px;
  font-size: 20px;
  max-height:150px;/* 30px * 5 */ /* ここを修正 */
  width:200px;
  border: 2px solid;
  border-color: #1da1f2;
  overflow-y: scroll /* ここを追加 */
}

サンプル

Comments

[nanase21]

ご教示いただきありがとうございます。
助かりました。
わざわざサンプルまで用意していただきありがとうございまいた。

[kyoya0819]

解決して何よりです。

Answer 2

contenteditableはブラウザによって実装が違うのでめんどくさい調整をする気がないなら
すなおにtextareaでやった方がよいですよ

sample

以下moを利用した検証

<style>
.txt-area{
  background: lightgray;
  line-height: 30px;
  font-size: 20px;
  height:30px;
  width:200px;
  border: 2px solid;
  border-color: #1da1f2;
}
</style>
<script>
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation.target.innerHTML);
  });
});
const config = { childList:true};
window.addEventListener('DOMContentLoaded', ()=>{
  observer.observe(document.querySelector('#dmComposerTextInput'), config);
});
</script>
<div aria-multiline="true" class="txt-area" contenteditable="true" id="dmComposerTextInput" role="textbox" spellcheck="true" tabindex="0" style="outline: none; user-select: text; white-space: pre-wrap; overflow-wrap: break-word;"></div>

Comments

[nanase21]

元々はtextareaでやっていたのですが、どうしても意図した動作にならなくて、色々チャット機能のあるwebサービスを調べたところTwitterではcontenteditableを使用していたのでcontenteditableで試している所です。(textareaではどうしてもうまく行数を制御できなくて)