lista - select html ejemplos

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

Question

Esto funciona en Chrome y en cualquier otro navegador que admita texto de marcador de posición en HTML5

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

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

¿Cómo puedo lograr 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

Aquí está la solución más simple que encontré 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 su propio.

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 del marcador de posición en el campo, pero no lo eliminan cuando el usuario se enfoca en el campo, lo que es peor que no lo admite en absoluto.

Answer 2

Aquí hay un complemento de MooTools, que lleva el marcador de posición a los navegadores que aún no lo admiten:

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

Answer 3

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

Aquí está el código que me funcionó:

<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 correo electrónico") y SUBSCRIPTION_LINK (es decir, el valor de la etiqueta de ''acción'' en su código de inserción EN mailchimp ...) son constantes de PHP utilizadas para la localización.

Answer 4

Funciona para mí, cambia tu CSS a

::-webkit-input-placeholder {
color: #999;
}

Answer 5

Para el trabajo de " marcador de posición " en Firefox solo agrega el atributo

:: - moz-placeholder

en las etiquetas CSS.

Answer 6

Por cierto ... si alguien está interesado ... encontré una solución elegante y agradable que es un complemento de jQuery que es MUY bueno.

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

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

Es la cosa más hermosa que he descubierto, junto a ''Placeholder'' en html.

Answer 7

Un día comenzaré a documentar esto correctamente, pero vea este ejemplo: http://dorward.me.uk/tmp/label-work/example.html

En breve: coloque una <label> debajo de una <input> transparente usando <div> para proporcionar bordes y color de fondo.

Luego use JS para determinar si la etiqueta debe estar visible o no en función del enfoque.

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

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

Answer 8

Uso el siguiente fragmento de código que escribí con jQuery. Simplemente agregue una clase de cuadro de texto-borrado automático a cualquier cuadro de texto en la página y debería estar listo.

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

Supongo que desea seguir utilizando el atributo de marcador de posición para los navegadores HTML5, en cuyo caso tendría que hacer una detección de navegador y solo aplicar la solución jQuery a los navegadores que no la admiten.

Mejor aún, puede Modernizer biblioteca Modernizer , como se describe en esta respuesta. Detección de soporte para características específicas de HTML 5 a través de jQuery

Answer 9

Utilizo este: https://github.com/Jayphen/placeholder Este complemento ligero y simple de jQuery es una bifurcación de danbentley / placeholder.

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

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

Answer 10

Yo uso este: https://github.com/danbentley/placeholder
Ligero y sencillo plugin jQuery.