¿Cómo obtengo texto de marcador de posición en Firefox y otros navegadores que no son compatibles con la opción de etiqueta html5?

Question

Esto funciona en Chrome y cualquier otro navegador que soporte HTML5 texto del marcador en

<input id="name" name="name" type="text" placeholder="Please enter your name..." required /> <br /> 

embargo, no funciona en 3.5 y anteriores de Firefox, y, obviamente, IE8, y posiblemente otros navegadores.

¿Cómo logro lo mismo (preferiblemente en HTML/CSS - si no estoy abierto a sugerencias), para admitir todos los navegadores más antiguos? Si no todos los navegadores, al menos Firefox e IE.

Safari y Chrome ya lo admiten (o las últimas versiones de todos modos).

Gracias.

Answer 1

Por cierto ... si alguien está interesado ... Encontré una buena solución elegante que es un plugin jQuery que es MUY agradable.

Literalmente es una línea de jQuery, un complemento js minificado, junto con un nombre de clase simple en la entrada.

http://labs.thesedays.com/projects/jquery/clearfield/

Es lo más bonito que he descubierto, junto a 'Marcador de posición' en html.

Answer 2

Uso el siguiente fragmento que escribí con jQuery. Simplemente agregue una clase de textbox-auto-clear a cualquier cuadro de texto en la página y debería estar listo para continuar.

<input type="text" value="Please enter your name" class="textbox-auto-clear" /> 

$(".textbox-auto-clear").each(function(){ 
    var origValue = $(this).val(); // Store the original value 
    $(this).focus(function(){ 
     if($(this).val() == origValue) { 
      $(this).val(''); 
     } 
    }); 
    $(this).blur(function(){ 
     if($(this).val() == '') { 
      $(this).val(origValue); 
     } 
    }); 
}); 

que suponer que usted desea seguir utilizando el atributo marcador de posición para los navegadores HTML5, en cuyo caso habría que hacer un poco de la detección del navegador y sólo aplicar la solución de jQuery para los navegadores que no soportan.

Mejor aún, nos puede la biblioteca Modernizer, como se describe en esta respuesta. Detecting support for specific HTML 5 features via jQuery

Answer 3

Un día voy a moverse a documentar adecuadamente esto, pero veo este ejemplo: http://dorward.me.uk/tmp/label-work/example.html

En pocas palabras - la posición A <label> bajo una transparente <input> usando <div> para proporcionar color y las fronteras de fondo.

A continuación, utilice JS para determinar si la etiqueta debe ser visible o no en función del enfoque.

Aplicar estilos diferentes cuando JS no está disponible para colocar la etiqueta junto al elemento en su lugar.

A diferencia del uso del value, esto no hace que el contenido sea inaccesible para dispositivos que solo muestran el contenido enfocado (por ejemplo, lectores de pantalla), y también funciona para entradas del tipo password.

Answer 4

Aquí es un plugin MooTools, que lleva el marcador de posición para los navegadores que no soportan todavía:

http://mootools.net/forge/p/form_placeholder

Answer 5

Aquí es la solución más sencilla que he encontrado trabajando en todas partes:

<input id="search" 
    name="search" 
    onblur="if (this.value == '') {this.value = 'PLACEHOLDER';}" 
    onfocus="if (this.value == 'PLACEHOLDER') {this.value = '';}" 
/> 

Reemplace PLACEHOLDER con el suyo.

Por el momento, FF3 aún no admite el atributo "marcador de posición" del elemento "entrada". FF4, Opera11 y Chrome8 lo admiten parcialmente, es decir, representan el texto de marcador de posición en el campo, pero no lo eliminan cuando el usuario se enfoca en el campo, lo que es peor porque no lo admite en absoluto.

Answer 6

Yo uso este: https://github.com/danbentley/placeholder
Plugin jQuery ligero y simple.

Answer 7

Yo uso este: https://github.com/Jayphen/placeholder Este ligero y simple plugin jQuery es un tenedor de danbentley/placeholder.

Ventaja: agrega una clase "marcador de posición" para ingresar los campos que se llenan temporalmente. Css ".placeholder {color: silver}" hace que el texto del polyfill parezca un marcador de posición en lugar de texto de entrada normal.

Desventaja: no rellena el marcador de posición de un campo de contraseña.

Answer 8

El truco es usar las funciones de javascript en Blur() y onFocus().

Este es el código que trabajó para mí:

<script language="javascript" type="text/javascript" > 

    var hint_color = "grey", field_color = null; 

    var hinted = true; 

    function hint() { // set the default text 

     document.getElementById('mce-EMAIL').style.color = hint_color; 
     document.getElementById('mce-EMAIL').value = "<?php echo SUBSCRIPTION_HINT; ?>"; 

     hinted = true; 

    } 

    function hintIfEmpty() { // set the default text, only if the field is empty 

     if (document.getElementById('mce-EMAIL').value == '') hint(); 

    } 

    function removeHint() { 

     if (hinted) { 

      document.getElementById('mce-EMAIL').style.color = field_color; 
      document.getElementById('mce-EMAIL').value = ""; 

      hinted = false; 

     } 

    } 

    function send() { 

     document.getElementById('subscription_form').submit(); 
     hint(); 

    } 

</script> 

<div style="position:absolute; display: block; top:10; left:10; "> 
<form id="subscription_form" action="<?php echo SUBSCRIPTION_LINK; ?>" method="post" target="_blank"> 

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" style="width: 122px;" onBlur="hintIfEmpty();" onFocus="removeHint();" required> 
    <a href="javascript:send()"><font style="position: relative; top:-1px;"><b>ok</b></font></a> 

</form> 
</div> 

<script language="javascript" type="text/javascript" > 

    field_color = document.getElementById('mce-EMAIL').style.color; 
    hint(); 

</script> 

SUBSCRIPTION_HINT (es decir: "su dirección de e-mail") y SUBSCRIPTION_LINK (es decir: el valor de la etiqueta 'acción' en el código de inserción ES MailChimp ...) son constantes de PHP utilizadas para la localización.

Answer 9

Para el trabajo "marcador de posición" en Firefox sólo tiene que añadir el atributo

:: - moz-marcador de posición

en etiquetas CSS.