2011-08-24 29 views
27

html5 admite el atributo de marcador de posición en los elementos input[type=text], pero necesito controlar los navegadores no compatibles. Sé que hay mil complementos por placeholder, pero me gustaría crear el 1001st.jquery: obtener el valor del atributo personalizado

Puedo obtener un control sobre el elemento input[placeholder], pero tratando de obtener el valor del atributo marcador de posición está volviendo indefinido - $("input[placeholder]").attr("placeholder").

Estoy usando jquery 1.6.2.

Aquí está el jsfiddle. Modifiqué el código para que funcione en un navegador compatible con html5 solo para fines de prueba.

html

<input type="text" name="email" size="10" placeholder="EMAIL ADDRESS"> 

jQuery

function SupportsInputPlaceholder() { 
    var i = document.createElement("input"); 
    return "placeholder" in i; 
} 

$(document).ready(function(){ 
    if(!SupportsInputPlaceholder()) { 
     //set initial value to placeholder attribute 
     $("input[placeholder]").val($("input[placeholder]").attr("placeholder")); 

     //create event handlers for focus and blur 
     $("input[placeholder]").focus(function() { 
      if($(this).val() == $(this).attr("placeholder")) { 
       $(this).val(""); 
      } 
     }).blur(function() { 
      if($(this).val() == "") { 
       $(this).val($(this).attr("placeholder")); 
      } 
     }); 
    } 
}); 

Gracias por cualquier y toda la ayuda, B

Respuesta

38

Se necesita algún tipo de iteración aquí, como val (excepto cuando se llama a una función) solo funciona en el primer elemento:

$("input[placeholder]").val($("input[placeholder]").attr("placeholder")); 

debería ser:

$("input[placeholder]").each(function() { 
    $(this).val($(this).attr("placeholder")); 
}); 

o

$("input[placeholder]").val(function() { 
    return $(this).attr("placeholder"); 
}); 
+2

¿No '$ (" entrada [marcador de posición] ") .val (function() {return $ (this) .attr (" placeholder "); }); '¿ser mejor? –

+0

Gracias Dennis. cuando establezco un punto de interrupción en cada uno, descubro que ni siquiera está ingresando a la función, como que no encuentra ningún elemento que coincida con ese selector. Pero cuando pongo un reloj en $ ("input [placeholder]"). Val() veo "" y si le doy un valor inicial al elemento veré el valor. – bflemi3

+0

@Richard Sí, eso es un poco mejor. Probablemente no mucha diferencia de pensamiento. bflemi3, ¿Qué navegador estás usando? Tu código funciona en Chrome e IE7 – Dennis

1

También puede hacer esto mediante la función de paso con el evento onclick

<a onlick="getColor(this);" color="red"> 

<script type="text/javascript"> 

function getColor(el) 
{ 
    color = $(el).attr('color'); 
    alert(color); 
} 

</script> 
Cuestiones relacionadas