web-dev-qa-db-fra.com

Texte par défaut lors de la saisie

Comment définir du texte vierge par défaut sur le champ de saisie et l'effacer lorsque l'élément est actif.

javascripthtmltextinput
30
Jaro

Dans les navigateurs modernes, vous pouvez définir l'attribut placeholder sur un champ pour définir son texte par défaut.

<input type="text" placeholder="Type some text" id="myField" />

Toutefois, dans les anciens navigateurs, vous pouvez utiliser JavaScript pour capturer les événements de focus et de flou:

var addEvent = function(elem, type, fn) { // Simple utility for cross-browser event handling
    if (elem.addEventListener) elem.addEventListener(type, fn, false);
    else if (elem.attachEvent) elem.attachEvent('on' + type, fn);
},
textField = document.getElementById('myField'),
placeholder = 'Type some text'; // The placeholder text

addEvent(textField, 'focus', function() {
    if (this.value === placeholder) this.value = '';
});
addEvent(textField, 'blur', function() {
    if (this.value === '') this.value = placeholder;
});

Démo: http://jsbin.com/utecu

67
moff

L'utilisation des événements onFocus et onBlur vous permet d'y parvenir

onfocus="if(this.value=='EGTEXT')this.value=''"

et

onblur="if(this.value=='')this.value='EGTEXT'"

L'exemple complet est le suivant:

<input name="example" type="text" id="example" size="50" value="EGTEXT" onfocus="if(this.value=='EGTEXT')this.value=''" onblur="if(this.value=='')this.value='EGTEXT'" />
14
Kyle Rozendo

Déclarez les styles pour les états inactif et actif:

.active {
    color: black;
}

.inactive {
    color: #909090;
}

Ajoutez le Javascript pour gérer le changement d'état:

function toggleText(el)
{
    var v = el.value;

   //Remove text to allow editing
    if(v=="Default text") {
        el.value = "";
        el.className = "active";
    }
    else {
         //Remove whitespace
        if(v.indexOf(" ")!=-1) {
            split = v.split(" ").join("");
            v = split;
        }

          //Change to inactive state
        if(v=="") {
            el.value = "Default text";
            el.className = "inactive";
        }
    }
}

Ajoutez votre zone de saisie avec la valeur par défaut, la classe inactive et les gestionnaires Javascript pointant vers la fonction toggleText() (vous pouvez utiliser écouteurs d’événements pour le faire si vous le souhaitez).

<input type="text" value="Default text" class="inactive" onFocus="toggleText(this);" onBlur="toggleText(this);">
3
Alex Rozanski

Du point de vue de la convivialité, le texte du composant d’entrée ne doit être conservé que pour les besoins de l’utilisateur. La valeur par défaut possible dans l'entrée doit être valide si l'utilisateur ne le modifie pas.

Si le texte d'espace réservé est censé indiquer comment remplir l'entrée, il est préférable de masquer près de l'entrée où il peut être vu également lorsque l'entrée a été remplie. De plus, l'utilisation d'un texte de substitution dans les composants de texte peut causer des problèmes, par exemple. avec des appareils en braille.

Si un texte fictif est utilisé, quelles que soient les consignes d'utilisation, veillez à le faire de manière discrète afin qu'il fonctionne avec des agents utilisateurs sans javascript ou lorsque js est désactivé.

2
Jawa

Ou simplement

<input name="example" type="text" id="example" value="Something" onfocus="value=''" />

Cela ne renverra pas le texte par défaut une fois la case effacée, mais permettra également à l'utilisateur de la vider et de voir tous les résultats dans le cas d'un script à remplissage automatique.

2
montrealmike

J'ai trouvé le plugin jQuery ( http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/ ) et l'utilise :)

1
Jaro

Ce que j'ai fait est de mettre un attribut de marque de réservation pour les navigateurs modernes:

<input id='search' placeholder='Search' />

Ensuite, j’ai fait un retour en arrière pour les navigateurs plus anciens utilisant JQuery:

var placeholder = $('search').attr('placeholder');
//Set the value
$('search').val(placeholder);

//On focus (when user clicks into the input)
$('search').focus(function() {
   if ($(this).val() == placeholder)
     $(this).val('');
});

//If they focus out of the box (tab or click out)
$('search').blur(function() {
   if ($(this).val() == '')
     $(this).val(placeholder);
});

Cela fonctionne pour moi.

1
Kevin

Vous pouvez utiliser ce plugin (je suis co-auteur)

https://github.com/tanin47/jquery.default_text

Il clone un champ d'entrée et le met là.

Cela fonctionne sur IE, Firefox, Chrome et même iPhone Safari, qui a le fameux problème de focus.

De cette façon, vous n'avez pas à vous soucier d'effacer le champ de saisie avant de le soumettre.

OR

Si vous souhaitez utiliser uniquement HTML5, vous pouvez simplement utiliser l'attribut "espace réservé" dans le champ de saisie.

0
Tanin