La fixation d'un texte HTML à l'entrée de la zone de valeur “par défaut”. Rétablir la valeur en cliquant sur la touche ECHAP

Lorsqu'un formulaire web est écrit dans le navigateur, le navigateur se souvient de ce que les valeurs initiales sont d'une zone de SAISIE de texte. c'est à dire. lorsqu'il reçoit le HTML comme ceci:

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

Le navigateur se souvient de "quelque chose" que l'initiale/par défaut la valeur. Lorsque l'utilisateur commence à taper dessus, puis frappe de l'ESC, le navigateur revient le champ à la valeur initiale (ou rien si elle a été initialement vide bien sûr).

Cependant, lors de la création d'une zone de saisie de texte par programmation, frapper ESC semble toujours vide la boîte, même si je le créer avec une valeur par défaut comme suit:

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

Le navigateur ne peut pas le compter comme une valeur par défaut et de ne pas revenir à elle lors de la frappe de la touche ECHAP. Donc ma question est, est-il un moyen de créer une zone de texte dans le code et en quelque sorte de lui affecter une valeur par défaut, de sorte que la touche ESC fonctionne que si le navigateur a reçu dans le document HTML?

InformationsquelleAutor ingredient_15939 | 2012-01-20
  1. 8

    Ce esc comportement est IE uniquement par la voie. Au lieu d'utiliser jQuery utiliser un bon vieux javascript pour la création de 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 alors je voudrais utiliser du jQuery objet de données pour stocker la valeur par défaut. Puis il quand l'utilisateur appuie sur escape.

    //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')); }
});
    • L'espace Réservé à l'attribut dans Yoshi's réponse est maintenant largement disponibles. Je voudrais utiliser cette approche vs ce javascript approche. Quand j'ai d'abord répondu à cette question, en 2012, IE8 et IE9 étaient encore largement utilisé et n'a pas le soutien de l'espace réservé.
    InformationsquelleAutor mrtsherman
  2. 40

    Vous pourriez à la recherche pour le placeholder attribut qui permet d'afficher un texte en gris dans le champ de saisie, tout vide.

    De Mozilla Developer Network:

    Une allusion à l'utilisateur de ce qui peut être entré dans le contrôle . L'
    espace réservé de texte ne doit pas contenir de retour chariot ou de la ligne d'alimentation. Cette
    attribut s'applique lorsque la valeur de l'attribut type est du texte,
    de recherche, tel, url ou e-mail, sinon elle est ignorée.

    Cependant, comme il est assez "nouveau" tag (à partir de la spécification HTML5 autant que je sache), vous pouvez vouloir de test du navigateur pour vous assurer que votre public cible est bien avec cette solution.

    (Si pas de dire à dire à la mise à niveau du navigateur " cause cette balise fonctionne comme un charme ;o) )

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

    Edit: Voici une plaine jQuery solution qui sera également effacer le champ de saisie si une fuite de frappe est détecté: http://jsfiddle.net/3GLwE/

    • Depuis, personne n'a fourni un exemple pour cela, ajoutez en entrée HTML: <input placeholder="texte ici" />
    • Merci, cela pourrait être utile, cependant j'ai besoin de quelque chose pour le public en général (c'est à dire. rétro-compatible) même si c'est un javascript approche.
    • Je suis désolé pour le retard monstre mais j'ai ajouté un autre violon qui n'est pas vraiment sur l'espace réservé à l'étiquette. J'ai utilisé des données de l'espace réservé pour des raisons de commodité, mais on pourrait aussi définir une variable JS au lieu de cela.
    InformationsquelleAutor nuala
  3. 4

    Si la question est: "Est-il possible d'ajouter de la valeur sur ESC" que la réponse est oui. Vous pouvez faire quelque chose comme ça. Par exemple avec l'utilisation de jQuery, il devrait ressembler à ci-dessous.

    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();
        }
    });
});

    De travail source peut être trouvé 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.

    • Merci, je suis conscient que cela peut être fait avec un script, mais j'espérais qu'il y a une propriété de l'élément que le navigateur supporte nativement comme valeur par défaut - plutôt que de dupliquer manuellement dans le script. Cependant, il semble mrtsherman est droit, et c'est un IE seule chose, soi - script, il est, je suppose. 🙂
    InformationsquelleAutor Marek Tuchalski
  4. 4

    Voir la propriété valeur par défaut de saisie de texte, il est également utilisé lorsque vous réinitialisez le formulaire en cliquant sur un <input type="reset"/> bouton (http://www.w3schools.com/jsref/prop_text_defaultvalue.asp )

    btw, defaultValue et de l'espace réservé de texte sont des concepts différents, vous avez besoin de voir lequel correspond le mieux à vos besoins

    InformationsquelleAutor Andreas Andreou