Как подключить событие к элементу HTML в Javascript? - PullRequest
Новая
       29

Как подключить событие к элементу HTML в Javascript?

0 голосов
/ 13 мая 2011

У меня возникают трудности с поиском совместимого с браузером метода, основанного на Javascript, для присоединения функции к элементу. Кажется, что у Microsoft (конечно) есть свой собственный способ делать вещи еще раз и мешает сделать это. По сути, я динамически создаю таблицу в Javascript и добавляю элементы TEXTAREA в ячейки в строке. Мне нужно добавить функцию в onkeydown для TEXTAREA, чтобы я мог проверить, достигла ли максимальная длина длины текстового поля (к сожалению, элементы TEXTAREA не поддерживают свойство MaxLength).

Существует ли простое решение для этого, которое работает для FF и IE6, IE7, IE8 и IE9?

Ответы [ 3 ]

1 голос
/ 13 мая 2011

Проблема с использованием ключевых событий для проверки содержимого textarea заключается в том, что существуют другие способы ввода текста, такие как вставка или перетаскивание. Многие используют setInterval или setTimeout , чтобы проверять содержимое и время от времени обновлять счет (скажем, 50 мс), но такие подходы могут быть неэффективными в вычислительном отношении. Возможно, вы сможете запустить таймер только тогда, когда текстовая область имеет фокус.

Существует также тип события HTML5 input, который запускается всякий раз, когда элемент управления формы имеет ввод: 

<textarea oninput="document.getElementById('msg').innerHTML = this.value.length;">
</textarea>
<div id="msg"></div>

Но, конечно, не все браузеры поддерживают это.

1 голос
/ 13 мая 2011

Я бы посоветовал вам взглянуть на jQuery . Примером тогда будет 

$('textarea').keydown(function () { });

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

$('textarea.limitedlength').keydown(function () { });

Также обратите внимание, что вы должны сделать это после создания элемента. Если вы не хотите беспокоиться о времени, используйте функцию live, затем jQuery присоединит обработчик событий к любому новому найденному элементу. 

$('textarea.limitedlength').live('keydown', function () { });

Преимущество заключается в том, что любые кросс-браузерные проблемы обрабатываются платформой. ( Мне не известно о каких-либо кросс-браузерных проблемах с событием keydown, но jQuery обрабатывает различия в настройке обработчиков событий и выборе правильных элементов ).

Как отмечает РобГ в своем ответе, нажатия клавиш (и событий нажатия клавиш) недостаточно из-за вставки. Другой подход заключается в подсчете и проверке удаления фокуса из текстовой области: 

$('textarea.limitedlength').blur(function () { });
0 голосов
/ 13 мая 2011

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

element.onkeydown = function(e)
{
    e = e || window.event;
    ...
}
...