Texte par défaut sur l'entrée

Question

Comment définir un texte par défaut vide dans le champ de saisie et l'effacer lorsque l'élément est actif.

Answer 1

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" /> 

Cependant, dans les anciens navigateurs, vous pouvez utiliser JavaScript pour capturer le focus et les événements 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

Answer 2

Utilisation des événements onFocus et onBlur vous permet d'atteindre cet , C'est-à-dire:

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'" /> 

Answer 3

styles Declare pour les états inactifs et actifs:

.active { 
    color: black; 
} 

.inactive { 
    color: #909090; 
} 

Ajouter 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 InP boîte ut, avec le jeu de valeur par défaut, l'ensemble de la classe inactive et gestionnaires Javascript pointant vers la fonction toggleText() (vous pouvez utiliser event listeners pour le faire si vous le souhaitez)

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

Answer 4

D'un point de vue facilité d'utilisation du texte dans la Le 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 elle n'a pas été modifiée par l'utilisateur.

Si le texte de l'espace réservé est destiné à indiquer comment remplir l'entrée, il est préférable de le placer 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 d'espace réservé à l'intérieur des composants de texte peut causer des problèmes, par ex. avec des appareils braille. Si un texte d'espace réservé est utilisé, quelles que soient les directives d'utilisation, il faut s'assurer qu'il est fait de manière discrète afin qu'il fonctionne avec les agents utilisateurs sans javascript ou lorsque js est désactivé.

Answer 5

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

Answer 6

Ou tout simplement

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

Ce ne sera pas republier le texte par défaut une fois que la boîte est effacée, mais également permettre à l'utilisateur de décochez la case et affichez tous les résultats dans le cas d'un script de saisie semi-automatique.

Answer 7

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

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

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

Il fonctionne sur IE, Firefox, Chrome et même iPhone Safari, qui a le fameux problème de mise au point. De cette façon, vous n'avez pas à vous soucier d'effacer le champ de saisie avant de le soumettre.

OU

Si vous voulez HTML5 seulement, vous pouvez simplement utiliser l'attribut « espace réservé » sur le champ d'entrée

Answer 8

Vous pouvez utiliser l'attribut d'espace réservé.
np. <input type="text" name="fname" placeholder="First name">
check http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 9

Ce que je n'est mis un attribut d'espace réservé pour les navigateurs modernes:

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

Ensuite, je fait une solution de repli pour les anciens navigateurs 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.