Максимальное число символов для ввода
Как заблокировать ввод при достижении максимального допустимого числа символов?
В input я бы просто написал maxlength="значение", но я использую div со свойством contenteditable="true". |
paveltkachev,
http://javascript.ru/forum/misc/2467...da-teksta.html |
Проверил в хроме и 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, влом гуглить, просвети зачем тут вообще try/catch? :)
|
Цитата:
в ff (ff34) не работает установка курсора через setStart, либо я что-то неправильно делаю :) |
Часовой пояс GMT +3, время: 10:27. |