de entrada y el valor de la decoloración textarea

Question

Quiero ser capaz de hacer algo como

<input type="text" name="txtField" value="" title="input your text" />
<textarea name="areaField" title="input your long text"></textarea>

Y el auto del título se desvanecerá de ida y vuelta en que el valor del campo, a diferencia de la "búsqueda" aquí en stackoverflow (justo en la parte superior, sólo se desvanecen).

Yo podría llegar a un javascript y el uso onblur y onfocus, pero eso sería problemático y espero innecesaria. Preferiblemente, me puse una sola función para cada entrada y área de texto dentro de cualquier archivo dado, por lo que todos necesitamos hacer que se estableció su title.

Primera pregunta : ¿Cuál es el nombre de este

pregunta principal : Alguien tiene una buena solución? ¿Qué pasa con sin jQuery? Tal vez hay una manera de hacerlo con CSS3 solamente, aunque lo dudo ...

Answer 1

Si estás bien con sólo trabaja en los nuevos navegadores, se puede utilizar el placeholder atributo en el campo de texto, para suministrar un marcador de posición que desaparecerá cuando uno se concentra y reaparecer cuando se desenfoque. Puede encontrar más información en Inmersión en HTML 5 .

<input type="text" name="txtField" value="" placeholder="input your text" />

Si quieres que funcione en los navegadores antiguos, es probable que tenga que aplicar el marcador de posición usted mismo, en JavaScript, por ejemplo. Usted puede encontrar todos sus elementos y input textarea usando document.getElementsByTagName y añadir la onfocus y manipuladores onblur a cada uno de los que utilizan DOM eventos .

Answer 2

Ok, gracias a la respuesta perfecta de Brian, este es el código que se me ocurrió. Me tomó el tiempo suficiente para hacer que funcione:

<form>
  <input type="text" name="txtField" value="" placeholder="input your text" />
  <textarea name="areaField" placeholder="input your long text"></textarea>
</form>

<script type="text/javascript">
(function() {
    ie_placeholder(document.getElementsByTagName('input'));
    ie_placeholder(document.getElementsByTagName('textarea'));
    function ie_placeholder (fields) {
        for (var i = 0; i < fields.length; i++) {
            var field = fields[i];
            field.onfocus = function () {
                if (this.value == this.placeholder) {
                    this.style.color = '';
                    this.value = '';
                }
            };
            field.onblur = function () {
                if (this.value == '' && this.placeholder != null) {
                    this.style.color = 'silver';
                    this.value = this.placeholder;
                }
            };
            field.onblur();
        }
    }
})();
</script>

Sólo hay que poner en el final de la forma, y ??que debe estar bien. Y, por favor, utilice el script del lado del servidor favorito para quitar esto de los navegadores compatibles HTML5. marcador de posición atributo se acaba el trabajo en HTML5 .