Javascript-форум - Максимальное число символов для ввода

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Максимальное число символов для ввода (https://javascript.ru/forum/dom-window/52571-maksimalnoe-chislo-simvolov-dlya-vvoda.html)

Максимальное число символов для ввода

Как заблокировать ввод при достижении максимального допустимого числа символов?

В input я бы просто написал maxlength="значение", но я использую div со свойством contenteditable="true".

Проверил в хроме и ff, работает вот такая фигня (кроссбраузерно можно использовать onkeyup вместо oninput)

<html>
<head>
</head>
<body>
<script>

d=document.createElement("div")
d.contentEditable=true
d.innerHTML="1"
document.body.appendChild(d)
d.oninput=function(){
   if(this.innerHTML.length>3) this.contentEditable=false
}


</script>
</body>
</html>

для одной строки в хроме

<div contenteditable="true">write here</div>
<script>
document.querySelector("div").addEventListener("input", function () {
	var sel = window.getSelection(),
		range = sel.getRangeAt(0),
		pos = range.endOffset;
	
	this.innerHTML = this.innerHTML.substr(0, 10);
	
	try {
		range.setStart(range.startContainer , pos);
	} catch (e) {
		range.setStart(range.startContainer , pos - 1);
	}
	sel.removeAllRanges()
	sel.addRange(range);
});
</script>

http://learn.javascript.ru/play/nj2d2b

:)

С range никогда не работал, поэтому взял кусок кода у bes`а.

<!DOCTYPE HTML>
<html>
  <head>
    
    <title>Test</title>
    
    <style type="text/css">
      div[contenteditable] {
        border: 1px solid #AAA;
        color: #AAA;
        height: 20px;
        line-height: 20px;
        margin: 5px 0;
        overflow: hidden;
        text-indent: 3px;
        white-space: nowrap;
        width: 200px;
      }
    </style>
    
    <script type="text/javascript">
      window.addEventListener('DOMContentLoaded', function() {
        var divs = document.querySelectorAll('div[contenteditable]');
        [].forEach.call(divs, function(self) {
          var maxLength = self.dataset.max;
          if(maxLength) {
            self.addEventListener('input', function(e) {
              if(this.innerHTML.length > maxLength) {
                var selection = window.getSelection(),
                    range = selection.getRangeAt(0),
                    pos = range.endOffset;
                this.innerHTML = this.innerHTML.substr(0, maxLength);
                try {
                	range.setStart(range.startContainer , pos);
				} catch (e) {
        			range.setStart(range.startContainer , pos - 1);
                }
                selection.removeAllRanges();
                selection.addRange(range);
              }
            }, false);
          }
        });
      });
    </script>
    
  </head>
  
  <body>
    
    <div contenteditable="true" data-max="20"></div>
    <div contenteditable="true" data-max="30"></div>

  </body>
</html>

Всем спасибо за помощь!

Цитата:

Сообщение от bes

для одной строки в хроме

Цитата:

Сообщение от paveltkachev

Всем спасибо за помощь!

а я думал, что будут вопросы, почему в моём примере try-catch не отрабатывет в ff и как сделать, чтобы не только для одной строки :)

bes, влом гуглить, просвети зачем тут вообще try/catch? :)

Цитата:

Сообщение от Ruslan_xDD (Сообщение 348385)

bes, влом гуглить, просвети зачем тут вообще try/catch? :)

при вводе символа курсор оказывается в позиции "текущая позиция до ввода символа + 1", она и будет в pos, поэтому, когда курсор будет в позиции 10, попытка установить курсор в позицию 11 бросит исключение
в ff (ff34) не работает установка курсора через setStart, либо я что-то неправильно делаю :)