Come collegare un evento a un elemento HTML in JavaScript?

Question

Sto avendo difficoltà a trovare un metodo basato su JavaScript compatibile con browser con browser per fissare una funzione a un elemento.Sembra che Microsoft (ovviamente) abbia il proprio modo di fare le cose ancora una volta e sta rendendo difficile farlo.Fondamentalmente, sto creando un tavolo dinamicamente in javascript e sto aggiungendo elementi di textarea alle cellule nella riga.Devo aggiungere una funzione all'overkeydown per la textarea in modo che posso controllare se la lunghezza della cassetta di testo ha raggiunto un limite massimo (gli elementi di TextArea non supportano una proprietà massima purtroppo).

Fa una soluzione semplice per questo esistente che funziona per FF e IE6, IE7, IE8 e IE9?

Answer 1

Ti suggerirei di dare un'occhiata a jquery . Un esempio sarebbe quindi

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

.

Si noti che in questo esempio collegando l'eventHandler ad ogni textarea. Un modo migliore sarebbe quello di utilizzare lezioni CSS o un'altra selezione più specifica per trovare i textai giusti. Ad esempio:

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

.

Si noti inoltre che dovresti farlo dopo aver creato l'elemento. Se non si desidera preoccuparti della tempistica, utilizzare la funzione Live, JQuery collegherà quindi l'EventHandler a qualsiasi nuovo elemento trovato.

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

.

Il vantaggio è che qualsiasi problema del browser è gestito dal framework. ( Non sono a conoscenza di alcun problema del browser a croce con l'evento KeyDown, ma JQuery gestisce le differenze nella configurazione dei gestori di eventi e selezionando gli elementi giusti ).

Come note Robg nella sua risposta, il tastodown (e gli eventi chiave) non sono abbastanza, a causa del incollato. Un altro approccio sarebbe il contare e controllare quando la messa a fuoco è stata rimossa dalla TextArea:

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

.

Answer 2

Il problema con l'utilizzo di eventi chiave per verificare il contenuto di TextArea è che ci sono altri modi di inserire il testo, come incolla o trascinare.Molti usano setinterval o settentimeout per verificare il contenuto e aggiornare il conteggio di volta in volta (diciamo 50ms), ma tali approcci possono essere computazionalmente inefficienti.Potresti essere in grado di avere il timer in esecuzione solo quando la textarea ha focus.

C'è anche il tipo di evento input HTML5 che si spara ogni volta che un controllo del modulo ha immesso:

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

.

Ma ovviamente non tutti i browser lo supportano.

Answer 3

A meno che tu non abbia bisogno di allegare più di un ascoltatori di eventi, funziona bene:

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

.