Jquery Установить максимальные символы для содержимого редактируемого элемента [дубликат]

Если вы хотите, чтобы он работал с классами. Другими словами, элемент мог бы совместно использовать имена классов и иметь свой собственный уникальный счет:

var content_id = '.myclass';  

max = 1;
//binding keyup/down events on the contenteditable div
$(content_id).keyup(function(e){ check_charcount(this, max, e); });
$(content_id).keydown(function(e){ check_charcount(this, max, e); });

function check_charcount(elem, max, e){   
    if(e.which != 8 && $(elem).text().length >= max){       
        e.preventDefault();
    }
}

Простой способ достичь этого:

<div onkeypress="return (this.innerText.length <= 256)" contenteditable="true">

var onKeyPress = function () {
    var keyCode = window.event.keyCode,
        isNumeric = (keyCode > 47 && keyCode < 58),
        isNotEnterKey = !!(window.event.keyCode !== 13);

        (isNotEnterKey) || (this.blur());

        return (isNumeric && this.innerText.length < 3);
};

Во-первых, это раздражает пользователя: я бы предложил вместо этого сделать что-то похожее на поле комментариев StackOverflow, которое позволяет вам вводить столько или меньше, как вам нравится, показывает вам сообщение о том, сколько символов вы 'typed и слишком ли много или слишком мало, и отказывается предоставить вам комментарий, длина которого недействительна.

Во-вторых, если вам действительно нужно ограничить длину текста, заменив весь контент из <div> при каждом нажатии клавиши, если содержимое слишком длинное, излишне дорогостоящее и сделает редактор невосприимчивым к более медленным машинам. Я предлагаю обработать событие keypress и просто запретить вставку символа с помощью preventDefault() в событии (или в IE, установив [returnValue] в true, если вы используете attachEvent). Это не помешает пользователю вставлять текст, поэтому вам нужно будет обработать событие paste (которого нет в Opera или Firefox & lt; 3, так что вам потребуется какое-то решение на основе опроса для тех). Поскольку вы не сможете получить доступ к предварительно вставленному контенту, у вас не будет никакого способа узнать, приведет ли паста к личным ограничениям, поэтому вам нужно будет установить таймер, чтобы снова проверить длину после пасты. Все, что имеет место, первый вариант кажется мне предпочтительным.

Так я сделал это с помощью привязки jQuery, что упростило мне, просто добавив длину данных свойства-данных в элемент редактирования контента. Просто добавьте код javascript в любом месте документа.

$(document).ready(function(){
	// Excempt keys(arrows, del, backspace, home, end);
	var excempt = [37,38,39,40,46,8,36,35];
	// Loop through every editiable thing
	$("[contenteditable='true']").each(function(index,elem) {
	    var $elem = $(elem);
	    // Check for a property called data-input-length="value" (<div contenteditiable="true" data-input-length="100">)
	    var length = $elem.data('input-length');
	    // Validation of value
	    if(!isNaN(length)) {
	    	// Register keydown handler
	        $elem.on('keydown',function(evt){
	        	// If the key isn't excempt AND the text is longer than length stop the action.
	            if(excempt.indexOf(evt.which) === -1 && $elem.text().length > length) {
	               evt.preventDefault();
	               return false;
	            }
	        });
	    }
	});
});

div {
  background-color:#eee;
  border: 1px solid black;
  margin:5px;
  width:300px;
  height:100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" data-input-length="100">
You can type a 100 characters here
</div>
<div contenteditable="true" data-input-length="150">
You can type a 150 characters here
</div>
<div contenteditable="true" data-input-length="10">
You can type a 10 characters here
</div>

Это лучший способ сделать эту самую обобщающую форму и просто отлично работать для меня!

<div contenteditable="true" name="choice1" class="textfield" max="255"></div>

    $('.textfield').on("keypress paste", function (e) {
        if (this.innerHTML.length >= this.getAttribute("max")) {
            e.preventDefault();
            return false;
        }
    });

Более обобщенная ревизия ответа @ user113716, которая не работает для нескольких допустимых для контента полей (она подсчитывает общее количество символов для всех элементов, соответствующих данному id, поэтому вы можете вводить только максимальные символы total на странице).

Это решение позволяет вам использовать общий класс и независимо ограничивать количество символов в каждом разрешающем контент поле.

html:

<div contenteditable="true" name="choice1" class="textfield"></div>

И JavaScript:

MAX_TEXTINPUT = 10;
TEXTFIELD_CLASS = "textfield"

$(document).ready(function() {

    //binding keyup/down events on the contenteditable div
    $('.'+TEXTFIELD_CLASS).keydown(function(e){ check_charcount(TEXTFIELD_CLASS, MAX_TEXTINPUT, e); });

})

function check_charcount(inputclass, max, e) {   
    var focused = $(document.activeElement)

    if(focused.hasClass(inputclass) && e.which != 8 && $(focused).text().length >= max)
    {
        e.preventDefault();
    }
}

$("[contenteditable=true]").keydown(function(e) {
    var max = $(this).attr("maxlength");
    if (e.which != 8 && $(this).text().length > max) {
        e.preventDefault();
    }
});