html <input type="text" /> événement onchange ne fonctionne pas

Question

Je suis en train de faire quelques expériences. Ce que je veux, c'est que à chaque fois que l'utilisateur tape quelque chose dans la zone de texte, il sera affiché dans une boîte de dialogue. J'ai utilisé l' onchange propriété de l'évènement pour y arriver, mais il ne fonctionne pas. J'ai encore besoin d'appuyer sur le bouton envoyer pour le faire fonctionner. J'ai lu sur AJAX et je pense à apprendre à ce sujet. Dois-je encore besoin d'AJAX pour le faire fonctionner ou est simple JavaScript assez? S'il vous plaît aider.

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

Answer 1

onchange est déclenchée uniquement lorsque le contrôle est floue. Essayez onkeypress à la place.

Answer 2

.on surveille à chaque modification d'une entrée à l'aide de jQuery 1,7 et au-dessus.

Pour surveiller un partiular classe:

$(".classNameHere").on("input", function(){
    alert("Input changed");
});

Pour surveiller un changement à toutes les entrées:

$("input").on("input", function(){
    alert("Input changed");
});

Answer 3

La vérification des frappes est qu'une solution partielle, car il est possible de modifier le contenu d'un champ de saisie à l'aide de clics de souris. Si vous faites un clic droit dans un champ de texte, vous devrez couper et coller des options que vous pouvez utiliser pour modifier la valeur sans en faire une combinaison de touches. De même, si la saisie semi-automatique est activée, puis vous pouvez cliquez gauche dans un champ et d'avoir une liste déroulante d'précédemment saisie de texte, et vous pouvez choisir parmi vos choix à l'aide d'un clic de souris. Frappe de piégeage ne détecte pas l'un de ces types de changements.

Malheureusement, il n'y a pas de "onchange" de l'événement que les rapports des modifications immédiatement, au moins autant que je sache. Mais il y a une solution qui fonctionne pour tous les cas: mettre en place un calendrier des événements à l'aide de la méthode setInterval().

Disons que votre champ de saisie de l'id et le nom de "ville":

<input type="text" name="city" id="city" />

Avoir une variable globale nommée "ville":

var city = "";

Ajouter à votre page d'initialisation:

setInterval(lookForCityChange, 100);

Puis de définir une lookForCityChange() fonction:

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

Dans cet exemple, la valeur de la "ville" est cochée, toutes les 100 millisecondes, que vous pouvez ajuster selon vos besoins. Si vous le souhaitez, utiliser une fonction anonyme au lieu de définir lookForCityChange(). Sachez que votre code ou même le navigateur pourrait fournir une valeur initiale pour le champ de saisie de sorte que vous pourriez être notifiés d'un "changement" avant que l'utilisateur ne fait rien; ajuster votre code.

Si l'idée d'un calendrier d'événement va décoller à chaque dixième de seconde semble anormale, vous pouvez lancer la minuterie lorsque le champ d'entrée reçoit le focus et le terminer (avec la fonction clearInterval()) à la une de flou. Je ne pense pas qu'il est possible de modifier la valeur d'un champ de saisie sans recevoir le focus, donc de tourner le minuteur sur et en dehors de cette manière doit être sûr.

Answer 4

utiliser la suite des événements au lieu de "onchange"

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

Answer 5

Tout d'abord, ce qui ne veut pas travailler"? Ne voyez-vous pas l'alerte?

Aussi, Votre code peut être simplifié à cette

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}