Comment obtenir le texte d'une zone de saisie au cours de onKeyPress?

Question

Comment obtenir le texte d'une zone de saisie au cours de onKeyPress?

Demandé el 6 de Juillet, 2012: Quand la question a-t-elle été
53187 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

je suis en train de mettre le texte dans une zone de texte que l'utilisateur tape dans l'il (jsfiddle aire de jeux):

<html>
<body>
    <input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
    <span id="lblValue">The text box contains: </span>
</body>

<script>
    function edValueKeyPress()
    {
        var edValue = document.getElementById("edValue");
        var s = edValue.value;

        var lblValue = document.getElementById("lblValue");
        lblValue.innerText = "The text box contains: "+s;

        //var s = $("#edValue").val();
        //$("#lblValue").text(s);    
    }
</script>    

</html>

Le code s'exécute sans erreur, sauf que la valeur de l' input text zone de, cours de onKeyPress est toujours la valeur avant de la changer:

enter image description here

Question: Comment puis-je obtenir le texte d'une zone de texte lors de onKeyPress?

Bonus Chatter

Il y a trois événements liés à "l'utilisateur tape" dans le DOM HTML:

onKeyDown
onKeyPress
onKeyUp

Dans Windows, la commande de l' WM_Key des messages devient important lorsque l'utilisateur appuie sur une touche et la touche commence à se répéter:

WM_KEYDOWN('a') - l'utilisateur a poussé vers le bas de l' Une clé
WM_CHAR('a') - un a caractère a été reçu par l'utilisateur
WM_CHAR('a') - un a caractère a été reçu par l'utilisateur
WM_CHAR('a') - un a caractère a été reçu par l'utilisateur
WM_CHAR('a') - un a caractère a été reçu par l'utilisateur
WM_CHAR('a') - un a caractère a été reçu par l'utilisateur
WM_KEYUP('a') - l'utilisateur a publié l' Une clé

Sera résultat en cinq caractères qui apparaissent dans un texte de contrôle: aaaaa

Le point important étant que vous répondez à l' WM_CHAR message, celui qui se répète. Sinon, vous manquez des événements lorsqu'une touche est enfoncée.

En HTML, les choses sont légèrement différentes:

onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyDown
onKeyPress
onKeyUp

Html offre une KeyDown et KeyPress chaque répétition des touches. Et l' KeyUp événement n'est généré lorsque l'utilisateur relâche la touche.

La vente à emporter

je peux répondre à onKeyDown ou onKeyPress, mais les deux sont toujours levé avant l' input.value a été mis à jour
je ne peux pas répondre à onKeyUp, car il n'est pas le texte dans la zone de texte change.

Question: Comment puis-je obtenir le texte d'une zone de texte lors de onKeyPress?

Bonus De Lecture

Demandé el 6 de Juillet, 2012 par Ian Boyd

Answer 1

5 Réponses

Answer 2

55voto

Jonathan M Points 9304

Garder les choses simples. Utiliser les deux onKeyPress() et onKeyUp():

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

Cela prend en charge l'obtention de la plupart des mises à jour de la chaîne de valeur (après que la touche vers le haut) et aussi les mises à jour si l'utilisateur appuie sur une touche.

jsfiddle: http://jsfiddle.net/VDd6C/8/

Répondu el 6 de Juillet, 2012 par Jonathan M (9304 Points )

Answer 3

19voto

arnaud576875 Points 35281

la valeur de l'entrée de la zone de texte, cours de onKeyPress est toujours la valeur avant de la changer

C'est fait exprès: Cela permet à l'écouteur d'événement pour annuler la pression de touche.

Si les écouteurs d'événement annule l'événement, la valeur n'est pas mise à jour. Si l'événement n'est pas annulé, la valeur est mise à jour, mais après l'écouteur d'événement a été appelé.

Pour obtenir la valeur après la valeur du champ a été mis à jour de l'annexe a de la fonction à exécuter sur le prochain événement de la boucle. La manière habituelle de le faire est d'appeler setTimeout avec un délai d'attente de 0:
$('#field').keyup(function() {
    var $field = $(this);

    // this is the value before the keypress
    var beforeVal = $field.val();

    setTimeout(function() {

        // this is the value after the keypress
        var afterVal = $field.val();
    }, 0);
});
Essayer ici: http://jsfiddle.net/Q57gY/2/

Edit: Certains navigateurs (Chrome par exemple) de ne pas déclencher des événements de pression de touche pour la touche retour arrière; modification de la pression de touche à keyup dans le code.

Répondu el 6 de Juillet, 2012 par arnaud576875 (35281 Points )

Answer 4

3voto

raksh pal Points 1

<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%;  margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox>

<script>
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
</script>

Répondu el 27 de Septembre, 2014 par raksh pal (1 Points )

Answer 5

1voto

Utkanos Points 11665

J'ai l'habitude de concaténer la valeur du champ (c'est à dire avant d'être mis à jour) avec la clé associée à la clé de l'événement. Les utilisations suivantes récente JS donc, il faudrait ajuster pour le soutien dans les vieux IE.

Récente JS exemple

document.querySelector('#test').addEventListener('keypress', function(evt) {
    var real_val = this.value + String.fromCharCode(evt.which);
    if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2);
    alert(real_val);
}, false);

Soutien pour les anciens IEs exemple

//get field
var field = document.getElementById('test');

//bind, somehow
if (window.addEventListener)
    field.addEventListener('keypress', keypress_cb, false);
else
    field.attachEvent('onkeypress', keypress_cb);

//callback
function keypress_cb(evt) {
    evt = evt || window.event;
    var code = evt.which || evt.keyCode,
        real_val = this.value + String.fromCharCode(code);
    if (code == 8) real_val = real_val.substr(0, real_val.length - 2);
}

[EDIT - cette approche, par défaut, désactive les touches pour des choses comme le retour de l'espace, CTRL+A. Le code ci-dessus peut accueillir pour le premier, mais il devra encore bricoler pour permettre à ces derniers, et quelques autres éventualités. Voir Ian Boyd commentaire ci-dessous.]

Répondu el 6 de Juillet, 2012 par Utkanos (11665 Points )

Answer 6

1voto

Charles Bretana Points 59899

facile...

Dans votre gestionnaire d'événements keyPress, écrire

void ValidateKeyPressHandler(object sender, KeyPressEventArgs e)
{
    var tb = sender as TextBox;
    var startPos = tb.SelectionStart;
    var selLen= tb.SelectionLength;

    var afterEditValue = tb.Text.Remove(startPos, selLen)
                .Insert(startPos, e.KeyChar.ToString()); 
    //  ... more here
}

Répondu el 2 de Mai, 2013 par Charles Bretana (59899 Points )

Comment obtenir le texte d'une zone de saisie au cours de onKeyPress?

Bonus Chatter

Bonus De Lecture

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment obtenir le texte d'une zone de saisie au cours de onKeyPress?

Bonus Chatter

Bonus De Lecture

Réponses

Questions connexes

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: