No sé si tiene un nombre especial, pero ¿hay una manera fácil y sencilla de establecer el texto predeterminado en un campo de entrada que desaparece en el enfoque y reaparece en desenfoque si el cuadro de texto está vacío ?texto predeterminado en el campo de entrada
la palabra es WATERMARK
le animo a utilizar un plugin, a menos que tengas un montón de tiempo devel Oping y prueba. Hay muchos problemas y efectos secundarios a tener en cuenta al escribir este código.
Solo pensé en hacerte saber que 3 de los 4 enlaces están rotos. –
Aquí está solution.
$(".defaultText").focus(function(srcc)
{
if ($(this).val() == $(this)[0].title)
{
$(this).removeClass("defaultTextActive");
$(this).val("");
}
});
$(".defaultText").blur(function()
{
if ($(this).val() == "")
{
$(this).addClass("defaultTextActive");
$(this).val($(this)[0].title);
}
});
$(".defaultText").blur();
puede probar esto: utilizando el atributo de título para almacenar el texto predeterminado
$(function(){
$(".makedefault").bind("blur",function(){
if($(this).val().length == 0)
{
$(this).val($(this).attr('title'));
}
});
$(".makedefault").bind("focus",function(){
if($(this).val() == $(this).attr('title'))
{
$(this).val("");
}
});
});
La funcionalidad es conocida como marca de agua, y se puede lograr de muchas maneras, una de ellas es
onfocus="if(this.value=='Enter Email')this.value=''"
onblur="if(this.value=='')this.value='Enter Email'"
Esto funcionará para cuadro de texto de correo electrónico.
Puede usar el nuevo atributo de marcador de posición HTML5.
Editar: actualícelo para utilizar algo más de HTML5/jQuery hotness, almacenamiento de datos HTML5.
<input type="text" placeholder="type here" data-placeholder-text="type here" />
Esto funcionará en todos los navegadores modernos. Y degradar con gracia en IE. Sin embargo, para IE, tendrás que usar javascript.
$(document).ready(function() {
var $input = $('#id_of_input_element');
$input.focus(function() {
if($(this).val() == $(this).data('placeholder-text')) {
$(this).val('')
}
}).blur(function() {
if($(this).val() == '') {
$(this).val($(this).data('placeholder-text'));
}
}).trigger('blur');
}):
+1 para uso HTML5! :) –
@The_Butcher: gracias, estoy contento de que todos estemos escuchándonos mutuamente, pero deberíamos estar brillando hoy, no viviendo en el mundo con todos estos hacks de javascript. – xzyfer
Sí, desafortunadamente muchas corporaciones y empresas no pueden pasar de Win XP a partir de ie6, ya que la mayoría de su software está hecho para funcionar en ie6:/ –
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, sólo puede utilizar atribuir "marcador de posición" en el campo de entrada
Aquí es mi enfoque (con jQuery):
<input id="myBox" type="text" />
<script>
// Input field and default text
var $element = $('#myBox');
var defaultText = 'Hello World';
$element.focus(function(){
// Focused
$element.removeClass('defocused').addClass('focused');
if($element.val() == defaultText)
$element.val('');
}).blur(function(){
// Defocused
$element.removeClass('focused').addClass('defocused');
if($element.val() == '')
$element.val(defaultText);
});
// Initialization
$element.blur();
</script>
El nombre es marcador de posición Ahora forma parte oficialmente de la especificación HTML (5), por lo que todos los navegadores modernos lo admiten como HTML en línea. Ver mi respuesta a continuación para una explicación. – xzyfer