Ответ 1

Еще одним довольно хриплым решением может быть проверка прокрутки по клавише вверх. Если существует прокрутка, удалите последний символ, пока существует прокрутка:

function restrictScroll(e){
    if(e.target.clientHeight<e.target.scrollHeight){
        while(e.target.clientHeight<e.target.scrollHeight){
            e.target.value = e.target.value.substring(0, e.target.value.length-1);
        }
    }
};
document.getElementById("textareaid").addEventListener('keyup', restrictScroll);

Это будет работать по мере ввода и вставляет блоки текста. Большие текстовые блоки могут занять немного больше времени. В этом случае вы можете захотеть разделить на "\n" и сначала удалить строки, затем символы.

jsfiddle

Ответ 2

Если вы хотите, чтобы ваша функция срабатывала всякий раз, когда текст в вашем поле изменяется, вы можете привязать ее к событиям input и propertychange в соответствии с этим ответом:

• fooobar.com/questions/94078/...

Вот так:

$('#descrip').on('input propertychange', function(e){

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

Что касается того, чтобы остановить их от ввода контента, который превысит лимит, я думаю, вам нужно отслеживать, какой контент они ввели сами, а затем вернуть свое последнее изменение, если оно нарушит ваши критерии.

Обратите внимание, что, например, Twitter не мешает пользователю вводить больше символов, если они перешли через предел - они просто говорят пользователю, что они превышают лимит, и рассказывают им, когда они вернутся. Это может быть наиболее удобный дизайн.

Ответ 3

Вы можете попробовать следующее:

$('#descrip').bind('paste',function(e) { 
    var el = $(this);
    setTimeout(function() {
        //Get text after pasting
        var text = $(el).val();
        //wath yu want to do
    }, 100);
};

Jsfiddle

Решение взято из здесь и здесь. Он работает путем привязки к событию вставки. Поскольку событие вставки запускается перед вставкой текста, вам нужно использовать setTimeout, чтобы поймать текст после вставки. Есть еще некоторые грубые грани (т.е. Если вы выберете текст и нажмите "назад", оно не обновится).

Тем не менее, комментарий Spudley имеет некоторые действительные точки, которые вы можете рассмотреть.

Edit:

Примечание по jsfiddle: он позволяет вам преодолевать предел при вставке, но как только вы превысите пределы, вы не сможете вставить (или набрать) текст до тех пор, пока не перейдете к пределу снова.

Следует учитывать, что, поскольку вы ограничиваете длину текста по размеру, который он получает после рендеринга (у которого есть собственные проблемы, указанные Указом), а не определенная десятая часть, вы можете знать, подходит ли текст или нет, но не знаю, какая часть текста находится внутри пределов, и сколько из них.

Вы можете рассмотреть значение переадресации текстового поля на свое предыдущее значение, если вложенный текст делает imput превышен лимит, как в этот.

Однако для вырезания текста после вставки, так как текст без подгонки не используется, но остальная часть вложенного текста разрешена, вам нужен совершенно другой подход. Вы можете попробовать повторить текст, пока не найдете, сколько из этого текста достаточно.

Кстати, строки и, кажется, приводят к тому, что ваш оригинальный script ведет себя странно.

Ответ 4

Мне удалось запустить программу:

var over = false;
var num = 0;
var valid_entry = "";
$('#descrip').keyup(function(e){
    var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
    var t = $(this).val();
    getMaxRow(t,key,this);
});

function getMaxRow(t,key,obj) {
    jQuery('<div/>', {
            "class": "hide",
            text: t,
            id: "test"
        }).appendTo('body');
        var h = $('#test').height();
        $('#test').remove();
        if(h >= 100){
            num += 1;
            if(num == 1){
                var div = '<div id="message">You have run out of room</div>'
                $('body').append(div);
            }
            over = true;
        }
        else{
            over = false;
            valid_entry = t;
            if(num >= 1){
                $('#message').remove();
                num = 0;
            }
        }

        if( over ) {
            //Do this for copy and paste event:
            while ( over ) {
                 //Try using a substring here
                 t = t.substr(0,(t.length-1));
                 over = getMaxRow(t,key,obj);
            }
        }

        $(obj).val(valid_entry);

        return over;
}