Cambiar los atributos de las etiquetas HTML con javascript

Estoy tratando de obtener lo que creo que es una buena parte de HTML5 en mi sitio web: el atributo de marcador de posición para input campos.

Pero la forma en que lo tengo en mi sitio web se degrada mucho. Porque me salteé las etiquetas de los campos y usé el marcador de posición como etiqueta.

En este momento tengo varios campos de entrada con marcadores de posición, se ven así:

<input placeholder="hereismyplaceholder" />

Pero donde la compatibilidad con marcadores de posición HTML5 no está disponible, me gustaría que todos los campos de entrada con marcadores de posición cambiaran a esto. Obviamente con su texto de marcador de posición equivalente:

<input onblur="if (this.value == '') {this.value = 'hereismyplaceholder';}" onfocus="if (this.value == 'hereismyplaceholder') {this.value = '';}" value="hereismyplaceholder" />

Así que me detuve Modernizr, y lo consigo para detectar los marcadores de posición con el siguiente javascript:

if (Modernizr.input.placeholder) {
} else {
// BUT I NEED SOMETHING IN HERE
}

Pero no tengo ni idea de qué hacer ahora. Como no tengo experiencia con javascript, no soy desarrollador.

La solución más simple sería la mejor por favor. No me preocupan las buenas prácticas, solo quiero que funcione por ahora.

preguntado el 16 de mayo de 11 a las 18:05

De la especificación HTML 5: "El atributo de marcador de posición no debe utilizarse como alternativa a una etiqueta". El marcador de posición proporciona una pista para facilitar la entrada, no reemplaza una etiqueta real. -

Sí, también lo he leído. Gracias. Movimiento del diseñador general en aras de la claridad. Simplemente simplifica las cosas en mi opinión. es decir. Twitter -

Yo diría que los campos sin etiquetas pueden funcionar cuando tienes muy pocos campos, tal vez 2 o 3 -

La claridad no se logra eliminando las instrucciones justo cuando alguien está a punto de comenzar a completar el campo. -

Entonces, palabra equivocada. Y tengo muy pocos campos. Hay 2 con marcadores de posición. 3 juntos en otra página. Y 1 juntos en otra página. -

2 Respuestas

No solicitó jQuery, pero no quería preocuparme por problemas entre navegadores:

if (!Modernizr.input.placeholder) {
  $("input[type=text]")
  .focus(function(e){
      if (this.value == $(this).attr('placeholder')) {
         this.value = '';
      }         
  })
  .blur(function(e){
    setPlaceholder(this);
  }).each(function(index, el){
    setPlaceholder(el);
  });

  function setPlaceholder(el) {
    if (el.value  == '') {
        el.value = $(el).attr('placeholder');
    }
  }
}

contestado el 16 de mayo de 11 a las 23:05

¿Supongo que se podría lograr algo similar a esto en JavaScript normal? ¿O hay grandes problemas entre navegadores y debería poner jQuery en mi sitio web para que esto sea más fácil? - Serbal

Es lo suficientemente simple como para que no haya problemas cruzados de navegadores aquí, se puede lograr fácilmente con JS normal, solo más código. Sin embargo, no puedo seguir adelante y escribirlo todo. Si no tiene experiencia con JS, incluiría jQuery y comenzaría a usarlo a partir de ahora. Hace las cosas mucho más fáciles (aunque yo mismo uso otra cosa) - Juan Mendes

"No funcionó" es el peor comentario al pedir ayuda. ¿Depuraste? ¿Qué parte no funciona? No voy a escribir código listo para producción para usted, ¡le mostraré cómo hacerlo! - Juan Mendes

Mi error. Desde la consola de IE Dev Tools: SCRIPT5009: '$' is undefined javascript.js, line 6 character 5 Probablemente ahora valga la pena mencionarlo: no debería importar que ese código jquery esté dentro de un documento javascript vinculado, en aras de la limpieza, ¿verdad? - Serbal

Ah, la versión minificada de jquery de su sitio web no funciona. code.jquery.com/jquerymin.js De acuerdo, después de usar la versión normal de jquery, ese error desapareció, pero todavía no hay marcadores de posición. Serbal

Hay un ejemplo aquí, http://www.modernizr.com/docs/#input

Para su caso de uso específico, el código debe ser

// if placeholder isn't supported:
if (!Modernizr.input.placeholder){
  // use a input hint script
  setInputHint(document.getElementById('idoftheinputelement'),'hereismyplaceholder');
}

contestado el 16 de mayo de 11 a las 22:05

Esto requiere que tenga una llamada separada para cada uno de los campos necesarios y necesita duplicar lo que ya ha puesto en el atributo HTML del marcador de posición. Juan Mendes

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.