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

J'essaye de faire une expérience. 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é la onchangepropriété event pour y arriver, mais cela ne fonctionne pas. Je dois toujours appuyer sur le bouton Soumettre pour que cela fonctionne. J'ai lu sur AJAX et je pense en savoir plus. Ai-je encore besoin d'AJAX pour le faire fonctionner ou est-ce qu'un simple JavaScript suffit? Veuillez 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); 
}

onchangene se déclenche que lorsque le contrôle est flou. Essayez à la onkeypressplace.

Utilisez .on('input'...pour surveiller chaque modification d'une entrée (coller, incruster, etc.) à partir de jQuery 1.7 et supérieur.

Pour les entrées statiques et dynamiques:

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

Pour les entrées statiques uniquement:

$('.my-class').on('input', function(){
    alert('Input changed');
});

JSFiddle avec exemple statique / dynamique: https://jsfiddle.net/op0zqrgy/7/

La vérification des frappes n'est qu'une solution partielle, car il est possible de modifier le contenu d'un champ de saisie en utilisant des clics de souris. Si vous cliquez avec le bouton droit dans un champ de texte, vous aurez des options de copier-coller que vous pouvez utiliser pour modifier la valeur sans appuyer sur une touche. De même, si la saisie semi-automatique est activée, vous pouvez cliquer avec le bouton gauche dans un champ et obtenir une liste déroulante du texte précédemment entré, et vous pouvez sélectionner parmi vos choix en utilisant un clic de souris. L'interception de frappe ne détecte aucun de ces types de modifications.

Malheureusement, il n'y a pas d'événement "onchange" qui signale les changements immédiatement, du moins pour autant que je sache. Mais il existe une solution qui fonctionne dans tous les cas: configurer un événement de minutage à l'aide de setInterval ().

Disons que votre champ de saisie a un identifiant et un nom de "ville":

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

Avoir une variable globale nommée "ville":

var city = "";

Ajoutez ceci à l'initialisation de votre page:

setInterval(lookForCityChange, 100);

Définissez ensuite une fonction lookForCityChange ():

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 "ville" est vérifiée toutes les 100 millisecondes, que vous pouvez ajuster en fonction de vos besoins. Si vous le souhaitez, utilisez une fonction anonyme au lieu de définir lookForCityChange (). Sachez que votre code ou même le navigateur peut fournir une valeur initiale pour le champ de saisie afin que vous puissiez être informé d'un «changement» avant que l'utilisateur ne fasse quoi que ce soit; ajustez votre code si nécessaire.

Si l'idée d'un événement de minutage qui se déclenche tous les dixièmes de seconde semble disgracieuse, vous pouvez lancer le minuteur lorsque le champ d'entrée reçoit le focus et le terminer (avec clearInterval ()) sur un flou. Je ne pense pas qu'il soit possible de changer la valeur d'un champ d'entrée sans qu'il reçoive le focus, donc activer et désactiver la minuterie de cette manière devrait être sûr.

HTML5 définit un oninputévénement pour capturer toutes les modifications directes. ça marche pour moi.

onchange se produit uniquement lorsque la modification de l'élément d'entrée est validée par l'utilisateur, la plupart du temps, c'est lorsque l'élément perd le focus.

si vous voulez que votre fonction se déclenche à chaque fois que la valeur de l'élément change, vous devez utiliser l' oninputévénement - c'est mieux que les événements de touche haut / bas car la valeur peut être modifiée avec la souris de l'utilisateur, c'est-à-dire collée, ou remplissage automatique, etc.

En savoir plus sur l' événement de changement ici

En savoir plus sur l' événement d' entrée ici

utiliser les événements suivants au lieu de "onchange"

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

Premièrement, qu'est-ce qui «ne fonctionne pas»? Vous ne voyez pas l'alerte?

En outre, votre code pourrait être simplifié à ceci

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

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

J'ai rencontré des problèmes où Safari ne déclenche pas d'événements "onchange" sur un champ de saisie de texte. J'ai utilisé un événement "change" jQuery 1.7.2 et cela n'a pas fonctionné non plus. J'ai fini par utiliser l'événement textchange de ZURB. Il fonctionne avec mouseevents et peut tirer sans quitter le terrain:
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

Quelques commentaires importants pour l'OMI:

• les éléments d'entrée n'émettant pas d'événement de «changement» jusqu'à ce que l'action de l'utilisateur ENTREE ou que le flou attende EST le comportement correct .

• L'événement que vous souhaitez utiliser est "input"(" oninput "). Voici bien démontré la différence entre les deux: https://javascript.info/events-change-input

• Les deux événements signalent deux gestes / moments différents de l'utilisateur (l'événement "entrée" signifie que l'utilisateur écrit ou navigue dans une des options de la liste de sélection, mais n'a toujours pas confirmé le changement. "Changer" signifie que l'utilisateur a changé la valeur (avec une entrée ou un flou notre)

• Dans ce cas, écouter les événements clés comme de nombreux autres est recommandé ici. (comme les personnes modifiant le comportement par défaut de ENTER sur les entrées) ...

• jQuery n'a rien à voir avec cela. Tout cela est au standard HTML.

• Si vous avez du mal à comprendre POURQUOI c'est le bon comportement, peut-être est-il utile, comme expérience, utilisez votre éditeur de texte ou navigateur sans souris / tapis, juste un clavier.

Mes deux centimes.

onkeyup a fonctionné pour moi. onkeypress ne se déclenche pas en appuyant sur l'espace arrière.

Il vaut mieux utiliser onchange(event)avec <select>. Avec <input>vous pouvez utiliser l'événement ci-dessous:

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

essayez onpropertychange. cela ne fonctionne que pour IE.