Ограничить текстовое поле текстом, который «подходит»

Question

У меня есть текстовое поле с шрифтом переменной ширины, и мне нужно обеспечить, чтобы пользователь не мог вводить больше текста, чем он «подходит» на текстовом поле без прокрутки.

Просто ловушка keydown и preventDefault() 'ing означает, что я не могу покрыть прецедент, где пользователь вставляет вещи в текстовое поле.

Расчет ширины текста не помогает мне определить, сколько текста делает подходит для этой коробки.

Как это сделать?

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 
})