web-dev-qa-db-fra.com

Meilleure façon de suivre onchange au fur et à mesure que vous saisissez type d’entrée = "texte"?

D'après mon expérience, l'événement input type="text"onchange se produit généralement après que vous avez quitté (blur) le contrôle.

Existe-t-il un moyen de forcer le navigateur à déclencher onchange chaque fois que le contenu de textfield change? Si non, quel est le moyen le plus élégant de suivre cela «manuellement»?

L'utilisation des événements onkey* n'est pas fiable, car vous pouvez cliquer avec le bouton droit sur le champ et choisir Coller, ce qui modifiera le champ sans aucune saisie au clavier.

Est-ce que setTimeout est le seul moyen? .. Moche :-)

javascripthtmlhtml-form
360
Ilya Birman

Mettre à jour:

Voir Une autre réponse (2015).

_ {Réponse originale: 2009} _

Donc, vous voulez que l’événement onchange se déclenche lors d’une enfoncement du clavier, du flou, du et coller? C'est magique.

Si vous souhaitez suivre les modifications au fur et à mesure de leur saisie, utilisez "onkeydown". Si vous devez intercepter les opérations de collage avec la souris, utilisez "onpaste" ( IE , FF3 ) et "oninput" ( FF, Opera, Chrome, Safari1).

1Cassé pour <textarea> sur Safari. Utilisez textInput à la place

232
Crescent Fresh

Ces jours-ci écoutent oninput . Cela ressemble à onchange sans qu'il soit nécessaire de perdre le focus sur l'élément. C'est HTML5.

Il est supporté par tout le monde (même mobile), sauf IE8 et inférieur. Pour IE, ajoutez onpropertychange. Je l'utilise comme ça:

const $source = document.querySelector('#source');
const $result = document.querySelector('#result');

const typeHandler = function(e) {
  $result.innerHTML = e.target.value;
}

$source.addEventListener('input', typeHandler) // register for oninput
$source.addEventListener('propertychange', typeHandler) // for IE8
// $source.addEventListener('change', typeHandler) // fallback for Firefox for <select><option>, for <input> oninput is enough
<input id="source" />
<div id="result"></div>

516
Robert Siemer

Javascript est imprévisible et amusant ici.

  • onchange se produit uniquement lorsque vous floutez la zone de texte
  • onkeyup & onkeypress ne se produit pas toujours lors du changement de texte
  • onkeydown se produit lors du changement de texte (mais ne peut pas suivre les opérations de copier-coller avec un clic de souris)
  • onpaste & oncut se produit en appuyant sur la touche et même avec le clic droit de la souris.

Donc, pour suivre le changement dans la zone de texte, nous avons besoin de onkeydown, oncut et onpaste. Dans le rappel de ces événements, si vous vérifiez la valeur de la zone de texte, vous n'obtenez pas la valeur mise à jour car la valeur est modifiée après le rappel. Une solution consiste donc à définir une fonction de délai d’attente avec un délai d’attente de 50 millisecondes (ou peut être inférieure) pour suivre le changement.

C'est un sale coup mais c'est le seul moyen, comme j'ai fait des recherches.

Voici un exemple . http://jsfiddle.net/2BfGC/12/

37
Sanket Sahu

onkeyup se produit après avoir tapé, par exemple, j'appuie sur t lorsque je lève le doigt, l'action se produit mais sur keydown l'action se produit avant que je ne chiffre le caractère t

J'espère que c'est utile pour quelqu'un. 

Donc, onkeyup est préférable lorsque vous voulez envoyer ce que vous venez de taper maintenant.

9
Fernando André

J'avais une exigence similaire (champ de style Twitter). Utilisé onkeyup et onchange. onchange prend en charge les opérations de collage de la souris lors de la perte de focus sur le terrain.

[Mise à jour] En HTML5 ou ultérieur, utilisez oninput pour obtenir les mises à jour en temps réel des modifications de personnage, comme expliqué dans les autres réponses ci-dessus.

8
Mohnish

Si vous utilisez SEULEMENT Internet Explorer, vous pouvez utiliser ceci:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

J'espère que cela pourra aider.

7
RolandDeschain

Je pense qu'en 2018, il est préférable d'utiliser l'événement input.

-

Comme l'indique la spécification WHATWG ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Déclenché sur les commandes lorsque l'utilisateur modifie la valeur (voir aussi L'événement change )

-

Voici un exemple d'utilisation:

<input type="text" oninput="handleValueChange()">
4
Patrick H.

"input" a fonctionné pour moi. 

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);
4
Sam

il existe une solution assez proche (ne corrige pas toutes les méthodes de collage) mais la plupart d'entre elles:

Cela fonctionne aussi bien pour les entrées que pour les textareas:

<input type="text" ... >
<textarea ... >...</textarea>

Fait comme ça:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

Comme je l'ai dit, toutes les manières de coller un événement sur tous les navigateurs ne sont pas pires. Certains pires ne déclenchent aucun événement du tout, mais les minuteries sont horribles à utiliser pour de tels événements.

Mais la plupart des méthodes de collage sont réalisées avec le clavier et/ou la souris, de sorte qu'un onkeyup ou onmouseup est normalement déclenché après un collage, et onkeyup est également activé lors de la frappe au clavier.

Assurez-vous que votre code de vérification ne prend pas beaucoup de temps ... sinon, l'utilisateur aura une mauvaise impression.

Oui, le truc est de tirer sur la clé et sur la souris ... mais attention, les deux peuvent être licenciés, alors pensez-y!

4
z666zz666z

Veuillez juger de l’approche suivante avec JQuery:

HTML:

<input type="text" id="inputId" />

Javascript (JQuery):

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});
4
Alex Uke

Pour suivre chacun d’entre eux, essayez cet exemple et, avant cela, réduisez complètement le clignotement du curseur à zéro.

<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>

</body>

onblur: l'événement génère à la sortie

onchange: l'événement est généré à la sortie si des modifications sont apportées à inputtext

onkeydown: un événement est généré à chaque pression de touche (pour les clés conservant également des temps longs)

onkeyup: l'événement génère sur n'importe quelle version de clé

onkeypress: idem que onkeydown (ou onkeyup) mais ne réagit pas pour ctrl, backsace, alt other

3
Venkat

Vous pouvez également utiliser les événements keydown, keyup et keypress.

3
Gumbo

2018 ici, c'est ce que je fais:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

Si vous pouviez signaler des défauts dans cette approche, je vous en serais reconnaissant.

1
a20

Robert Siemer addEventListener n'est pas pris en charge dans IE8.

"Les anciennes versions de IE prenaient en charge une méthode équivalente, EventTarget.attachEvent ()." https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener

0
bpolelli