0

Как ограничить количество вводимых символов? При вводе они ограничиваются. А вот что делать если их вставят?

function go(){
  if(document.getElementById("hi").innerHTML.length > 200){
    event.preventDefault();
  }
}
html, body {
  min-height: 100px;
}

.textval {
  width: 200px;
  max-width: 100%;
  min-height: 1em;
  border: 1px solid #0c00ff;
  border-radius: 5px;
  font-family: sans-serif;
  line-height: 1.2;
  font-size: 1em;
  padding: .3em .5em;
}

[contenteditable]:empty:before {
  display: block;
  color: #999;
  content: attr(placeholder);
}
<div id="hi" class="textval" contenteditable="true" placeholder="Текст" onkeypress="go()"></div>

1
  • При вставке скопированного текста в элемент с атрибутом contenteditable сохраняется исходное форматирование, включая теги и стили. Какое поведение вы ожидаете в таких ситуациях?
    – user256824
    Commented 25 мая 2019 в 7:41

2 ответа 2

0

Событие input работает и в случае вставки текста. Есть одна проблема. Если текст всё же режется - фокус возвращается на начало строки. А поставить фокус в конце текста contenteditable - муторная задача, насколько понял - https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser . Если принципиально не важно именно contenteditable использовать, у textarea нет такой проблемы.

/* В данном случае, ключевое слово this указывает на элемент, который запустил функцию */

document.getElementById('hi').addEventListener('input', function(){
  if(this.innerText.length > 200){
    this.innerText = this.innerText.slice(0, 200);
  }
});
html, body {
  min-height: 100px;
}

.textval {
  width: 200px;
  max-width: 100%;
  min-height: 1em;
  border: 1px solid #0c00ff;
  border-radius: 5px;
  font-family: sans-serif;
  line-height: 1.2;
  font-size: 1em;
  padding: .3em .5em;
}

[contenteditable]:empty:before {
  display: block;
  color: #999;
  content: attr(placeholder);
}
<div id="hi" class="textval" contenteditable="true" placeholder="Текст"></div>

1
  • Дело все в плагине kwolfy.github.io/KEmoji с textarea проще. Дело в том что плагин уже адаптирован под сайт и нужно дополнение. С ограничены вводом. По сути можно и обрезать при отправки в чат. Но хотелось бы что бы при вставки лишнее не вылазило. А конкретно что будет отправятся оставалось Commented 24 мая 2019 в 15:45
0

Используйте input и maxlength="4"

<input type="text" maxlength="4" id="hi" class="textval" contenteditable="true" placeholder="Текст" onkeypress="go()"/>
2
  • Дело в том что там плагин под смаилы вот такой kwolfy.github.io/KEmoji а под input большая сложность переписывать его. Commented 24 мая 2019 в 15:39
  • Древний плагин, который давно не поддерживается, имеет очень ограниченное количество смайлов в низком качестве, которые на любом современном экране выглядят плохо. Повод задуматься о переходе на что-то более актуальное и подходящее. :)
    – Arsenty
    Commented 24 мая 2019 в 15:56

Ваш ответ

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.