2009-06-16 7 views
6

Je suis confronté à un problème avec le type de texte d'entrée (c'est-à-dire la zone de texte).Javascript Textbox Event

J'ai écrit une fonction utilisée par l'événement onkeyup dans une zone de texte. La ligne ressemble à ceci:

<input type='TEXT' value='abc' onkeyup='changeSomething(this);'> 

Mais maintenant, je suis face à problème que lorsque l'utilisateur sélectionne des valeurs à partir des valeurs entrées précédemment, Je ne reçois pas un événement lorsque l'utilisateur sélectionne les valeurs précédemment saisies dans le menu déroulant (edit: Je crois qu'il fait référence à la saisie semi-automatique du navigateur ici).

Quelqu'un at-il une solution pour cela? :)

Répondre

11

utilisation onchange au lieu de onkeyup dans ce cas

voir: http://www.w3schools.com/jsref/event_onchange.asp

par exemple

<input type='text' value='abc' onchange='changeSomething(this);' /> 

pour contourner ce

EDIT Deux choses:
1) Les valeurs de saisie semi-automatique peuvent être sélectionnées à l'aide des touches fléchées et entrer/onglet, et en utilisant la souris. Les touches fléchées/enter.tab déclenchent les événements onkeyup ... cliquer dans la zone de saisie semi-automatique ne déclenche cependant pas l'événement onclick.
2) L'événement onchange se déclenche dès que la mise au point est perdue SI le contenu a changé. La mise au point n'est pas perdue lors de la sélection des valeurs de saisie semi-automatique. Pour l'essentiel, il ne semble pas y avoir de moyen raisonnable de garantir que l'événement sera traité comme vous le souhaitez.

Tout d'abord, avez-vous vraiment besoin d'écouter chaque frappe? Deuxièmement, seriez-vous mieux servi en désactivant la saisie semi-automatique? (par exemple <input type='text' value='abc' autocomplete='off' onkeyup='changeSomething(this);' />)

+1

+1 événements clés sont notoirement fragiles et ne traitera pas la copie en fonction souris/coller par exemple – annakata

+0

excellent point. keyup/keypress sont, cependant, très bien si vous fournissez une interface pilotée par clavier/permissif. Autre que ça ... pas si utile. –

+0

Je le vois comme ceci: si l'événement clé est en soi ce qui vous intéresse, alors utilisez les événements clés. Si vous êtes intéressé par l'effet * de l'événement clé, utilisez autre chose. – annakata

3

Voici une solution qui interroge élément périodiquement pour tout changement

<script type="text/javascript"> 

var changeWatcher = { 
    timeout: null, 
    currentValue: '', 
    watchForChange: function(el) { 
     if(el.value != this.currentValue) { 
      this.changed(el); 
     } 
     this.timeout = setTimeout(function() { 
      changeWatcher.watchForChange(el) 
     }, 200); 
    }, 
    cancelWatchForChange: function() { 
     clearTimeout(this.timeout); 
     this.timeout = null; 
    }, 
    changed: function(el) { 
     this.currentValue = el.value; 
     // do something with the element and/or it's value 
     //console.log(el.value); 
    } 
} 

</script> 
<input type='text' value='abc' onfocus='changeWatcher.watchForChange(this)' onblur='changeWatcher.cancelWatchForChange()' onchange='changeWatcher.changed(this)' /> 
+0

Nous n'obtenons aucun des événements est ce cas ... Donc cela ne fonctionnera pas .. désolé pour cela .. –