установка максимальной длины с помощью JavaScript

Question

Я пытаюсь установить максимальную длину для полей ввода динамически, используя JavaScript. По-видимому, это проблема в IE, и я нашел часть решения.

$("input#title").get(0).setAttribute("max_length", 25);
$("input#title").get(0).setAttribute(
                        "onkeypress", 
                        "return limitMe(event, this)");

function limitMe(evt, txt) {
    if (evt.which && evt.which == 8) return true;
    else return (txt.value.length < txt.getAttribute("max_length");
}

Это работает в Firefox, но не в IE по некоторым причинам. Однако он работает с полями ввода, установленными так:

<input type="text" max_length="25" onkeypress="return limitMe(event, this);"/>

Но так как поля ввода создаются динамически, я не могу этого сделать ... Есть идеи?

Answer 1

Если вы используете jQuery, то почему бы не в полной мере использовать его абстракции?

* 1003 Е.Г. *

Вместо:

$("input#title").get(0).setAttribute("max_length", 25);
$("input#title").get(0).setAttribute(
                        "onkeypress", 
                        "return limitMe(event, this)");
function limitMe(evt, txt) {
    if (evt.which && evt.which == 8) return true;
    else return (txt.value.length < txt.getAttribute("max_length");
}

Сделайте это:

$('input#title').attr('maxLength','25').keypress(limitMe);

function limitMe(e) {
    if (e.keyCode == 8) { return true; }
    return this.value.length < $(this).attr("maxLength");
}

---

Редактировать: причина, по которой он не работает в IE, вероятно, из-за того, как вы прикрепили обработчик 'onKeyPress' через setAttribute. - Это неправильный способ регистрации обработчиков событий.

Answer 2

Атрибут, который вы ищете, это maxlength, а не max_length. Смотри здесь .

Answer 3

IE чувствителен к регистру в setAttribute () и работает только "maxLength" ...

var el=document.createElement('input'); el.setAttribute('maxLength',25);

Answer 4

Не забывайте, однако, что если вы устанавливаете максимальную длину с помощью JavaScript, кто-то другой может так же легко изменить максимальную длину на то, что ему нравится. Вам все равно нужно будет проверить отправленные данные на сервере.

Answer 5

Все ответы здесь основаны на событиях нажатия / вставки. Вот мое решение с использованием события input:

$('input').on('input', onInput);

var inputValue = '';

function onInput(e) {
    if(e.currentTarget.value.length > 30) {
        e.currentTarget.value = titleValue;
        return;
    }

    inputValue = e.currentTarget.value;
}

Answer 6

Мой код также распечатывает написанные / max символы, игнорируйте эту часть.

$("[maxlength]").bind("keyup focusin", function(){
    var maxkey = $(this).attr("maxlength");
    var length = $(this).val().length;
    var value = $(this).val();
    $(this).parent().find(".counter").text(length+"/"+maxkey);
    if (length > maxkey) $(this).val(value.substring(0, maxkey));
}).bind("focusout", function(){$(this).parent().find(".counter").text("")});

Answer 7

Поскольку у меня возникли некоторые проблемы с ответом @James, я написал что-то, что работало даже при копировании, особенно при работе с IE8 и более поздними версиями. Моя реализация использует jQuery и его live-события.

jQuery(function () {
    $('body').on('keydown.maxlength_fix', 'textarea[maxlength]', function (e) {
        var $this = $(this);
        window.setTimeout(function () {
            var val = $this.val();
            var maxlength = $this.attr('maxlength');
            if (val.length > maxlength) {
                $this.val(val.substr(0, maxlength));
            }
        }, 4);
    });
});