web-dev-qa-db-fra.com

Comment obtenir la nouvelle valeur d'une entrée HTML après qu'une pression sur une touche l'ait modifiée?

J'ai une zone de saisie HTML

<input type="text" id="foo" value="bar">

J'ai attaché un gestionnaire pour l'événement 'keyup', mais si je récupère la valeur actuelle de la zone de saisie pendant le gestionnaire d'événements, j'obtiens la valeur telle qu'elle était, et non telle qu'elle sera !

J'ai essayé de récupérer les événements 'keypress' et 'change', même problème.

Je suis sûr que c'est simple à résoudre, mais à l'heure actuelle, je pense que la seule solution est pour moi d'utiliser un court délai pour déclencher du code quelques millisecondes à l'avenir!

Est-il possible d'obtenir la valeur actuelle lors de ces événements?

EDIT: on dirait que j'ai eu un problème de mise en cache avec mon fichier js car j'ai vérifié le même code plus tard et cela a très bien fonctionné. Je supprimerais la question, mais je ne sais pas si cela perdra la réputation des gens aimables qui ont posté des idées :)

javascripthtmldom
24
Paul Dixon

Pouvez-vous envoyer votre code? Je ne trouve aucun problème avec cela. Testé sur Firefox 3.01/safari 3.1.2 avec:

function showMe(e) {
// i am spammy!
  alert(e.value);
}
....
<input type="text" id="foo" value="bar" onkeyup="showMe(this)" />
31
Owen

Pour donner une approche moderne à cette question. Cela fonctionne bien, y compris Ctrl+v. GlobalEventHandlers.oninput .

var onChange = function(evt) {
  console.info(this.value);
  // or
  console.info(evt.target.value);
};
var input = document.getElementById('some-id');
input.addEventListener('input', onChange, false);
7
Jonatas Walker

Il existe deux types de valeur d'entrée: le champ propriété et le champ html attribut.

Si vous utilisez l'événement keyup et field.value, vous devez obtenir la valeur actuelle du champ. Ce n'est pas le cas lorsque vous utilisez field.getAttribute ('value') qui retournerait ce qui est dans l'attribut html (value = ""). La propriété représente ce qui a été tapé dans le champ et change au fur et à mesure que vous tapez, tandis que l'attribut ne change pas automatiquement (vous pouvez le changer en utilisant la méthode field.setAttribute).

7
pawel
<html>
    <head>
        <script>
        function callme(field) {
            alert("field:" + field.value);
        }
        </script>
    </head>
    <body>
        <form name="f1">
            <input type="text" onkeyup="callme(this);" name="text1">
        </form>
    </body>
</html>

Il semble que vous puissiez utiliser la clé onkeyup pour obtenir la valeur new du contrôle d'entrée HTML. J'espère que ça aide.

3
Neal Swearer

Vous pouvez essayer ce code (nécessite jQuery):

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#foo').keyup(function(e) {
                var v = $('#foo').val();
                $('#debug').val(v);
            })
        });
    </script>
</head>
<body>
    <form>
        <input type="text" id="foo" value="bar"><br>
        <textarea id="debug"></textarea>
    </form>
</body>
</html>
1
Marko Dumic

Ici est un tableau des différents événements et des niveaux de prise en charge du navigateur. Vous devez choisir un événement qui est pris en charge par au moins tous les navigateurs modernes.

Comme vous le verrez dans le tableau, les événements keypress et change n'ont pas de prise en charge uniforme, contrairement à l'événement keyup.

Assurez-vous également d'attacher le gestionnaire d'événements à l'aide d'une méthode compatible avec plusieurs navigateurs ...

0
domgblackwell