web-dev-qa-db-fra.com

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

J'essaie de faire des 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é la propriété d'événement onchange pour que cela se produise, mais cela ne fonctionne pas. J'ai toujours besoin d'appuyer sur le bouton Soumettre pour que cela fonctionne. J'ai lu sur AJAX et je pense en apprendre davantage à ce sujet. Ai-je toujours besoin de AJAX pour que cela fonctionne ou si le simple JavaScript suffit? 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); 
}
javascriptdom-events
76
Newbie Coder

onchange n'est déclenché que lorsque la commande est floue. Essayez onkeypress à la place.

110
Ignacio Vazquez-Abrams

Utilisez .on('input'... pour contrôler chaque modification d'une entrée (coller, incrustation, etc.) à partir de jQuery 1.7 et versions ultérieures.

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 un exemple statique/dynamique: https://jsfiddle.net/op0zqrgy/7/

36
rybo111

La vérification des frappes au clavier n’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 cliquez avec le bouton droit de la souris sur un champ de texte, vous aurez des options couper et coller que vous pourrez utiliser pour modifier la valeur sans effectuer de frappe. De même, si la saisie semi-automatique est activée, vous pouvez cliquer avec le bouton gauche de la souris sur un champ pour afficher une liste déroulante du texte précédemment saisi. Vous pouvez également effectuer votre sélection parmi vos choix à l'aide d'un clic de souris. Le recouvrement des touches ne détectera aucun de ces types de modifications.

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

Disons que votre champ de saisie a un identifiant et le 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);

Puis définissez 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 peuvent fournir une valeur initiale pour le champ de saisie afin que vous puissiez être averti 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 s'éteignant tous les dixièmes de seconde semble indigne, vous pouvez initialiser le chronomètre 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 que celui-ci reçoive la mise au point. Il est donc prudent d'activer et de désactiver la minuterie de cette façon.

30
Dragonfly

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

19
Soufiane ELH

onchange n'apparaît que lorsque la modification de l'élément en entrée est validée par l'utilisateur, il s'agit généralement du moment où l'élément perd le focus.

si vous souhaitez que votre fonction soit activée à chaque modification de la valeur de l'élément, vous devez utiliser l'événement oninput. Il est préférable aux événements de touches haut/bas, car la valeur peut être modifiée à l'aide de la souris de l'utilisateur, c'est-à-dire collée ou automatiquement. remplir etc

En savoir plus sur l'événement change ici

En savoir plus sur l’événement en entrée ici

13
99 Problems - Syntax ain't one

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

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)
11
metaforce

Tout d'abord, qu'est-ce qui ne fonctionne pas? Ne voyez-vous pas l'alerte?

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

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

function checkInput(obj) {
    alert(obj.value); 
}
5
Ash Burlaczenko

J'ai rencontré des problèmes où Safari ne déclenchait pas d'événements "d'échange" 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. Cela 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'));
});
2
James Moberg

Il est préférable d'utiliser onchange(event) avec <select>. Avec <input>, vous pouvez utiliser l'événement ci-dessous:

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)
1
Mr. Nobody

onkeyup a fonctionné pour moi. onkeypress ne se déclenche pas lorsque vous appuyez sur l'espace précédent.

1
Bishnu Paudel

Quelques commentaires sur l’importance de l’OMI:

  • les éléments d'entrée n'émettant pas l'événement 'change' jusqu'à ce que l'action de l'utilisateur ENTREE ou que le flou soit en attente 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 d'utilisateur différents (événement "input" signifie que l'utilisateur est en train d'écrire ou de naviguer dans une liste de sélection, mais qu'il n'a toujours pas confirmé le changement. "Change" signifie que l'utilisateur a changé la valeur (avec une entrée ou un flou. notre)

  • Dans ce cas, écouter des événements clés tels que ceux recommandés ici est une mauvaise pratique. (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 en standard HTML.

  • Si vous ne parvenez pas à comprendre POURQUOI ce comportement est correct, cela peut être utile, utilisez plutôt votre éditeur de texte ou votre navigateur sans souris ni pavé, mais simplement un clavier.

Mes deux centimes.

0
cancerbero