2015-03-01 1 views
0

AvecComment appeler la fonction à partir de la touche de saisie de texte appuyer sur javascript?

<input type="text" onKeyPress="alert(this.value)"> 

la zone d'alerte affiche la valeur dans la zone, non inclus la clé actuelle enfoncée. Cependant, cela n'a pas le même comportement, et je ne sais pas pourquoi.

<input type="text" onKeyPress="handleInput(this.value)"> 

function handleInput(value){ 
    alert(value); 
} 

Ajouté Cette http://jsfiddle.net/abalter/adbbb599/6/

+0

Est-ce l'ordre dans le code? Vous avez d'abord défini l'entrée, puis la fonction? –

+0

Quel est le problème avec le mien? http://jsfiddle.net/abalter/adbbb599/4/ – abalter

+0

Peut-être utiliser onkeyup à la place? –

Répondre

2

La première chose est d'éviter en utilisant le code js à l'intérieur des balises HTML est une mauvaise pratique , vous pouvez utiliser l'événement keyup pour obtenir le contenu de l'entrée après que l'utilisateur libération de toute touche enfoncée

<input id="input"> 

<script> 
    var input = document.getElementById('input'); 
    input.addEventListener('keyup',function(){alert(input.value);}); 

</script> 
+0

Cela fonctionne avec un fichier js, mais seulement si je charge le js après le html. Pourquoi donc? – abalter

+0

Je veux poser des questions sur votre commentaire concernant le code js à l'intérieur des balises html.Serait-ce à stackoverflow science informatique ou applicatoins web? – abalter

+0

Bien sûr, vous devez d'abord attendre que le document soit chargé, puis vous pouvez le manipuler, vous pouvez utiliser ** window.onload = function() {ici votre code qui est exécuté après le chargement du document} ** ou jquery avec ** $ (document) .ready (function() {votre code}); ** – Ismail

2

Il doit présenter le même comportement. Assurez-vous de charger le javascript soit dans vos balises de tête ou de corps, de sorte que vous pouvez accéder à la fonction à partir du code HTML.

Ce code fonctionne pour moi:

<input type="text" onKeyPress="handleInput(this.value)"> 
    <script> 
     function handleInput(value){ 
      alert(value); 
     } 
    </script> 
+0

Dans la version live, je le charge dans la tête. Dans le jsfiddle, c'est, bien, juste là. – abalter

+0

Dans jsfiddle, vous pouvez spécifier où il sera chargé à gauche. Vous l'avez par défaut, qui est window.onload. Cela cache la fonction, mais cela fonctionnerait si vous l'aviez fait comme l'hamism le spécifie ci-dessus. Vous pouvez également mettre en boucle dans ou envelopper dans dans jsfiddle. –

+0

Faire comme vous l'avez dit fonctionne. Merci. Mais je veux avoir le js dans un fichier. Js. La méthode de hamism fonctionne dans un fichier js, mais seulement si je charge le js après le html. – abalter

1

La valeur 'value' en paramètre est généralement verbotim - c'est un mot réservé. Votre 'ceci' fait référence au champ de saisie, et donc 'this.value' renvoie tout le contenu du champ de saisie. Pour obtenir le code de l'essai de pression de touche:

<body> 
<input type="text" onKeyPress="handleInput();"> 
</body> 
<script> 
function handleInput(){ 
    alert(event.charCode); 
} 
</script> 

Cela ne fonctionne pas avec:

onKeyPress="event.charCode;" 

ou:

onKeyPress="this.event.charCode;" 

parce qu'aucun objet événement est créé.