「適合する」テキストにテキストエリアを制限する

Question

私は可変幅のフォントでテキストエリアを持っており、スクロールせずにテキストエリアに「フィット」するよりも多くのテキストを入力できないようにする必要があります。

keydownとpreventDefault()を単にトラップすると、ユーザーがテキストエリアに物を貼り付けるユースケースをカバーできません。

テキストの幅を計算しても、どれくらいのテキストが決定されるのかわかりませんはです。

どうすればよいですか？

Answer 1

jQueryを使用しても構わない場合、解決策は本当に簡単です。まず、テキストエリアの現在の値を変数に保存します。次にテキストエリアでinputイベントを聞き、this.scrollHeightとthis.clientHeightを比較してスクロールバーがあるかどうかを確認します。その場合は、textareaの値を前の値に変更します。最後に、現在のtextarea値をlastValue変数に代入します。

を参照してくださいコードスニペット：

var lastValue = $("textarea").val() 
 
$("textarea").on("input", function(event) { 
 
    if (this.scrollHeight > this.clientHeight) { 
 
    $("textarea").val(lastValue) 
 
    } 
 
    lastValue = $("textarea").val() 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<textarea></textarea>

ピュアJavaScriptのソリューション：

const textarea = document.querySelector("textarea") 
var lastValue = textarea.value 
textarea.addEventListener("input", function(event) { 
    if (this.scrollHeight > this.clientHeight) { 
    textarea.value = lastValue 
    } 
    lastValue = textarea.value 
})