Texto predeterminado en la entrada

Question

Cómo establecer el texto predeterminado en blanco en el campo de entrada y borrarlo cuando el elemento está activo.

Answer 1

En los navegadores modernos, puede establecer el atributo placeholder en un campo para establecer su texto predeterminado.

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

Sin embargo, en los navegadores antiguos, puede utilizar JavaScript para capturar el enfoque y desenfoque de eventos:

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

Demostración: http://jsbin.com/utecu

Answer 2

Uso de los onFocus y onBlur eventos le permite lograr este , Ie:

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

y

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

El ejemplo completo es el siguiente:

<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

estilos Declare para estados inactivos y activos:

.active { 
    color: black; 
} 

.inactive { 
    color: #909090; 
} 

añade el JavaScript para manejar el cambio de estado:

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"; 
     } 
    } 
} 

Agregue su inp Caja ut, con el conjunto de valores por defecto, el conjunto inactive clase y manipuladores de Javascript que apunta a la función toggleText() (que podría utilizar event listeners de hacerlo si así lo desea)

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

Answer 4

Desde el punto de vista del texto en la usabilidad El componente de entrada debe preservarse solo para los propósitos de entrada del usuario. El posible valor predeterminado en la entrada debe ser válido si el usuario no lo tocó.

Si el texto del marcador de posición es una sugerencia de cómo llenar la entrada, es mejor utilizarla cerca de la entrada, donde también se puede ver cuando se ha llenado la entrada. Además, el uso de un marcador de posición dentro de los componentes de texto puede causar problemas, p. con dispositivos Braille.

Si se utiliza un texto de marcador de posición, independientemente de las pautas de usabilidad, uno debe asegurarse de que se haga de forma discreta para que funcione con los agentes de usuario sin javascript o cuando js esté desactivado.

Answer 5

he encontrado plugin de jQuery (http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/) y utilizarlo :)

Answer 6

O simplemente

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

esto no va a fijar detrás del texto por defecto una vez que la caja se limpia, sino que también permitirá al usuario borre la casilla y vea todos los resultados en el caso de una secuencia de comandos de autocompletar.

Answer 7

Puede utilizar este plugin (Soy co-autor)

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

Se clona un campo de entrada y lo puso allí.

Funciona en IE, Firefox, Chrome e incluso iPhone Safari, que tiene el famoso problema de foco.

De esta manera no tiene que preocuparse por borrar el campo de entrada antes de enviarlo.

O

Si desea HTML5 solamente, se puede atribuir sólo tiene que utilizar "marcador de posición" en el campo de entrada

Answer 8

Puede utilizar el atributo marcador de posición.
np. <input type="text" name="fname" placeholder="First name">
cheque http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 9

Lo que hizo es poner un atributo marcador de posición para los navegadores modernos:

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

Entonces, hice una reserva para navegadores antiguos usando 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); 
}); 

Esto funciona para yo.