Cómo establecer el texto predeterminado en blanco en el campo de entrada y borrarlo cuando el elemento está activo.Texto predeterminado en la entrada
Respuesta
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
Genial, es una parte de HTML 5, http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#attr -input-placeholder – cic
Guau, no lo sabía. Gracias por el enlace! – moff
+1 para Javascript nativo. – FrankieTheKneeMan
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'" />
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);">
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.
he encontrado plugin de jQuery (http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/) y utilizarlo :)
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.
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
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
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.
- 1. texto predeterminado en el campo de entrada
- 2. Prevenir el comportamiento predeterminado en la entrada de texto mientras se presiona la flecha hacia arriba
- 3. Agregar un valor predeterminado a la entrada de texto en forma simple
- 4. Console.ReadLine ("Texto editable de texto predeterminado en línea")
- 5. PhoneGap + IOS impedir la acción de desplazamiento predeterminado comienza desde el campo de entrada de texto
- 6. CakePHP seleccionar el valor predeterminado en la entrada SELECT
- 7. Java JOptionPane texto predeterminado
- 8. Valor predeterminado para una columna de texto
- 9. entrada de texto simple_form
- 10. Tamaño de elemento de entrada predeterminado
- 11. jquery texto cambia cuando la entrada cambia
- 12. Javascript pronta - añadiendo variable en texto predeterminado
- 13. Cómo reemplazar el texto predeterminado en MATLAB
- 14. JQuery Texto predeterminado en el cuadro de texto vacío
- 15. valor predeterminado de entrada de jquery clear
- 16. Texto de entrada de texto deshabilitado
- 17. ¿Cómo puedo eliminar consistentemente el texto predeterminado de un elemento de entrada con Selenium?
- 18. ¿Cómo alinear verticalmente texto en tipo de entrada = "texto"?
- 19. Entrada de entrada personalizada para UITextField, ¿cómo dirijo la entrada de regreso al campo de texto?
- 20. extjs texto de entrada maskRe
- 21. Texto de entrada de AlertDialog
- 22. de entrada: Texto + selector de área de texto en jQuery
- 23. ¿Cómo esperar la entrada en un campo de texto?
- 24. poner dos de entrada de texto en la misma línea
- 25. Cambiar UIKeyboardType basado en la entrada de texto
- 26. Javascript para Jquery, agregue texto en la entrada onclick
- 27. Cómo bloquear la escritura en el texto de entrada?
- 28. HTML texto del marcador de entrada no aparece en Firefox
- 29. Establecer el valor predeterminado de una entrada de función para igualar otra entrada en Python
- 30. cómo cambiar el idioma de entrada del cuadro de texto en la aplicación web
Duplicado: http://stackoverflow.com/questions/1073428/what-the-best-way-to-display-a-default-text-in-textbixes-and-textareas/1073514#1073514 – Quentin
He encontrado jQuery plugin (http://www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/) y úselo :) – Jaro
Una vieja pregunta, lo sé, pero escribí un texto realmente liviano complemento porque no me gustan los otros que hay. Todo lo que necesita hacer es incluirlo, agregar 'placeholder' como clase en la entrada, y poner el texto predeterminado en el atributo' title'. https://github.com/justinbangerter/placeholder.js – jbangerter