web-dev-qa-db-fra.com

Définition de la valeur "par défaut" d'une zone de saisie HTML. Inverser la valeur en cliquant sur ECHAP

Lorsqu'un formulaire Web est écrit dans le navigateur, celui-ci garde en mémoire les valeurs initiales d'une zone de texte INPUT. c'est à dire. quand il reçoit du HTML comme ceci:

<input type="text" value="something">

Le navigateur se souvient de "quelque chose" comme valeur initiale/par défaut. Lorsque l'utilisateur commence à taper dessus, puis appuie sur ECHAP, le navigateur rétablit la valeur initiale du champ (ou vide si ce champ était vide, bien sûr).

Cependant, lors de la création programmée d'une zone de saisie de texte, appuyer sur Échap semble toujours vider la zone, même si je la crée avec une valeur par défaut, comme suit:

$('<input type="text" value="something">')

Le navigateur ne considère pas cela comme une valeur par défaut et ne le retourne pas lorsque vous appuyez sur ÉCHAP. Ma question est donc la suivante: existe-t-il un moyen de créer une zone de texte dans le code et de lui attribuer une valeur par défaut, de sorte que la touche Échap fonctionne comme si le navigateur l'avait reçue dans le document HTML?

htmlinputdefaultplaceholder
23
ingredient_15939

Ce comportement de esc est IE seulement en passant. Au lieu d'utiliser jQuery, utilisez un bon vieux javascript pour créer l'élément et cela fonctionne.

var element = document.createElement('input');
element.type = 'text';
element.value = 100;
document.getElementsByTagName('body')[0].appendChild(element);

http://jsfiddle.net/gGrf9/

Si vous souhaitez étendre cette fonctionnalité à d'autres navigateurs, utilisez l'objet de données de jQuery pour stocker les valeurs par défaut. Puis définissez-le lorsque l'utilisateur appuie sur échappement.

//store default value for all elements on page. set new default on blur
$('input').each( function() {
    $(this).data('default', $(this).val());
    $(this).blur( function() { $(this).data('default', $(this).val()); });
});

$('input').keyup( function(e) {
    if (e.keyCode == 27) { $(this).val($(this).data('default')); }
});
8
mrtsherman

Vous pouvez rechercher l'attribut placeholder qui affichera un texte gris dans le champ de saisie lorsqu'il est vide.

De Réseau de développeurs Mozilla:

Un indice pour l'utilisateur de ce qui peut être entré dans le contrôle. Le texte de substitution ne doit pas contenir de retour chariot ni de saut de ligne. Cet attribut s'applique lorsque la valeur de l'attribut type est text, search, tel, url ou email; sinon, il est ignoré.

Toutefois, comme il s’agit d’une balise relativement nouvelle (de la spécification HTML5), vous pouvez effectuer des tests de navigateur pour vous assurer que le public ciblé convient à cette solution.
(Si non, dites-leur de mettre à jour son navigateur, car cette balise fonctionne comme un charme; o))

Et enfin un mini-violon pour le voir directement en action: http://jsfiddle.net/LnU9t/

Edit: Voici une solution simple jQuery qui effacera également le champ de saisie si une frappe d'échappement est détectée: http://jsfiddle.net/3GLwF/

40
nuala

Si la question est: "Est-il possible d'ajouter de la valeur sur ESC", alors la réponse est oui. Vous pouvez faire quelque chose comme ça. Par exemple, avec l'utilisation de jQuery, cela ressemblerait à ce qui suit.

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<input type="text" value="default!" id="myInput" />

JavaScript

$(document).ready(function (){
    $('#myInput').keyup(function(event) {
        // 27 is key code of ESC
        if (event.keyCode == 27) {
            $('#myInput').val('default!');
            // Loose focus on input field
            $('#myInput').blur();
        }
    });
});

La source de travail peut être trouvée ici: http://jsfiddle.net/S3N5H/1/

S'il vous plaît laissez-moi savoir si vous vouliez dire quelque chose de différent, je peux ajuster le code plus tard.

4
Marek Tuchalski

Voir la propriété defaultValue d'une entrée de texte, elle est également utilisée lorsque vous réinitialisez le formulaire en cliquant sur un bouton <input type="reset"/> ( http://www.w3schools.com/jsref/prop_text_defaultvalue.asp )

btw, defaultValue et placeholder text sont des concepts différents, vous devez savoir lequel correspond le mieux à vos besoins.

4
Andreas Andreou