Как ограничить максимальное количество символов для contenteditable="true" через js?

Question

[lavezzi1]

Здравствуйте. Есть
<div contenteditable="true"></div>

Как можно ограничить максимальное количество символов через plain js? В гугле решения не нашел, либо решения баговые типа через ввод работает а через копипаст все равно позволяет больше вставить.

Answer 1

[napa3um]

const MAX_LEN = 5;
const div = document.getElementById('editor');

div.addEventListener('input', event => {
	if(div.innerHTML.length > MAX_LEN)
  	div.innerHTML = div.innerHTML.substr(0, MAX_LEN);
});

Подробнее о событиях ввода: https://learn.javascript.ru/events-change .
Сохранять позицию ввода чуть сложнее, подробности, например, можно посмотреть тут: stackoverflow.com/questions/3972014/get-caret-posi... .

Comments

[lavezzi1]

всмысле позицию ввода?

[napa3um]

lavezzi1: в том смысле, что при обрезании текста курсор устанавливается в его начало. Нужно сохранить текущую позицию курсора перед обрезанием, а потом восстановить её. Оставляю вам радость самостоятельного решения этого нюанса.

Answer 2

[Mikhail Osher]

1) слушать событие input
2) слушать событие paste. получить вставляемую длину, сложить с текущей, обрезать.

Comments

[napa3um]

Событие input покрывает все события изменения значения, в том числе и paste.

[Mikhail Osher]

napa3um: Так вперед. napa3um показал решение.