Le meilleur moyen de suivre les modifications au fur et à mesure de la saisie dans type d'entrée = "texte"?

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

Existe-t-il un moyen de forcer le navigateur à se déclencher à onchangechaque fois que le textfieldcontenu change? Sinon, quelle est la manière la plus élégante de suivre cela «manuellement»?

L'utilisation d' onkey*événements 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 setTimeoutle seul moyen? .. Moche :-)

Mise à jour:

Voir Une autre réponse (2015).

Réponse originale de 2009:

Donc, vous voulez que l' onchangeévénement se déclenche lors du keydown, du flou et du collage? 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, Safari ¹ ).

¹ _{Broken for <textarea>sur Safari. Utiliser à la textInputplace}

Ces jours-ci, écoutez oninput. On se sent comme onchangesans avoir besoin de perdre le focus sur l'élément. C'est HTML5.

Il est pris en charge par tout le monde (même mobile), sauf IE8 et les versions antérieures. Pour IE, ajoutez onpropertychange. Je l'utilise comme ceci:

const source = document.getElementById('source');
const result = document.getElementById('result');

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

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 

<input id="source">
<div id="result"></div>

Le code ci-dessous fonctionne bien pour moi avec Jquery 1.8.3

HTML: <input type="text" id="myId" />

Javascript / JQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

Javascript est imprévisible et amusant ici.

• onchange se produit uniquement lorsque vous brouillez la zone de texte
• onkeyup& onkeypressne se produit pas toujours lors d'un changement de texte
• onkeydown se produit lors du changement de texte (mais ne peut pas suivre le copier-coller avec un clic de souris)
• onpaste& oncutse produit en appuyant sur la touche et même avec le clic droit de la souris.

Ainsi, pour suivre le changement de zone de texte, nous avons besoin onkeydown, oncutet 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 temporisation avec une temporisation de 50 mili-secondes (ou peut-être moins) pour suivre le changement.

C'est un hack sale mais c'est le seul moyen, comme je l'ai recherché.

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

onkeyupse produit après avoir tapé par exemple j'appuie tlorsque je lève le doigt l'action se produit mais keydownl'action se produit avant que je ne chiffre le caractèret

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

Il onkeyupvaut donc mieux quand vous voulez envoyer ce que vous venez de taper maintenant.

J'avais une exigence similaire (champ de texte de style Twitter). Utilisé onkeyupet onchange. onchangeprend réellement en charge les opérations de collage de la souris lors de la perte de focus du champ.

[Mettre à jour] En HTML5 ou version ultérieure, utilisez oninputpour obtenir des mises à jour en temps réel des modifications de caractères, comme expliqué dans les autres réponses ci-dessus.

Je pense qu'en 2018, il vaut mieux utiliser l' inputévénement.

-

Comme le décrit 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 également l' événement change )

-

Voici un exemple d'utilisation:

<input type="text" oninput="handleValueChange()">

Si vous utilisez UNIQUEMENT 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.

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

Cela fonctionne pour les entrées ainsi que pour les zones de texte:

<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 façons de coller ne déclenchent pas un événement sur tous les navigateurs ... pire, certains ne déclenchent aucun événement, mais les minuteries sont horribles à utiliser pour cela.

Mais la plupart des méthodes de collage se font avec le clavier et / ou la souris, donc normalement un onkeyup ou onmouseup est déclenché après un collage, également onkeyup est déclenché lors de la frappe au clavier.

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

Oui, l'astuce consiste à tirer sur la touche et sur la souris ... mais attention, les deux peuvent être tirés, alors gardez cela à l'esprit !!!

Veuillez évaluer la prochaine approche à l'aide de 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
});

"input" a fonctionné pour moi.

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

Vous pouvez utiliser les keydown, keyupet les keypressévénements ainsi.

Pour suivre chacun, essayez cet exemple et, avant cela, réduisez complètement le taux de 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 au texte d'entrée

onkeydown: l'événement est généré à n'importe quelle pression sur une touche (pour une pression prolongée sur une touche également)

onkeyup: l'événement est généré sur n'importe quelle libération de clé

onkeypress: identique à onkeydown (ou onkeyup) mais ne réagit pas pour ctrl, backsace, alt autre

2018 ici, c'est ce que je fais:

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

Si vous pouvez signaler des failles dans cette approche, je vous en serais reconnaissant.

Méthode 1: ajouter un écouteur d'événements pour input:

element.addEventListener("input", myFunction);

Méthode 2: définissez la oninputpropriété avec JavaScript:

element.oninput = function()
{
    myFunction();
};

Méthode 3: définissez la oninputpropriété avec HTML:

<input type="text" oninput="myFunction();">

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

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