Limpiando <textarea> con Javascript?

Me gustaría tener algo como <textarea>Welcome, click here to type.</textarea>Limpiando <textarea> con Javascript?

Luego, desactive cuando el usuario haga clic en el área de texto, obviamente.

Pero.

Antes de que alguien menciona que hay duplicados de esta pregunta en este sitio ya hay otros detalles que no se mencionan en las respuestas. Por ejemplo:

que he visto que es posible borrar <textarea> sin onclick() y sólo tener un <textarea id="someid">. Simplemente no sé cómo lo hicieron, me gustaría hacer esto. No solo me gusta mi código, sino que me gustaría saber cómo fue posible. (Estoy pensando onClick() alguna manera dentro del <head><script type="text/javascript"></script></head>?)

también quiero que el <textarea>- no clara una vez que alguien ha escrito algo y hace clic en el área de texto de nuevo. , es decir, Cuando el usuario hace clic nuevamente en el área de texto para editar una parte determinada del texto ingresado.

No sé mucho Javascript pero esta es la forma en que veo que funcione:

Si <textarea> coincide con el valor Welcome, click here to type; debe borrar el texto una vez que el usuario haga clic en el área de texto.
Si <textarea> está vacío y ya no está enfocado, debe devolver el valor "Welcome, click here to type." nuevamente.

Esto significa que al hacer clic en el área de texto nuevamente no se borraría el texto, lo que impide que el texto se borre una vez que el usuario ha escrito algo en el cuadro.

Gracias de antemano por ayudarme! Su conocimiento sobre este asunto sería muy apreciado. :)

Fuente

2010-09-09 Tek

En el <head>, se puede hacer lo siguiente:

<script type="text/javascript"> 
    var textAreaDefaultText = "Welcome, click here to type."; 

    function textAreaFocus(textarea) { 
     if (textarea.value == textAreaDefaultText) { 
      textarea.value = ""; 
     } 
    } 

    function textAreaBlur(textarea) { 
     if (textarea.value == "") { 
      textarea.value = textAreaDefaultText; 
     } 
    } 

    window.onload = function() { 
     var textarea = document.getElementById("your_textarea_id"); 
     textarea.onfocus = function() { textAreaFocus(this); }; 
     textarea.onblur = function() { textAreaBlur(this); }; 
    }; 
</script>

En En esta instancia, hay una clara ventaja al usar los atributos del manejador de eventos en su lugar (aunque a expensas de mezclar script con su marcado, algo que generalmente no se recomienda por varias razones, la principal de las cuales es la separación de preocupaciones): el código funcionará tan pronto como se rendere el textarea d, mientras que con el método anterior, si el usuario hace clic en el área de texto antes de que se haya cargado el resto del documento, el controlador de eventos no se habrá creado y no ocurrirá nada. Por lo tanto, si no le importa tener un pequeño script en su margen de beneficio, recomendar dejar caer la parte window.onload y en lugar de hacerlo:

<textarea id="your_textarea_id" 
    onfocus="textAreaFocus(this)" 
    onblur="textAreaBlur(this)">Welcome, click here to type.</textarea>

Fuente

2010-09-09 11:50:18

) No creo que haya una "ventaja distintiva" "Aquí, a menos que la página cargue excepcionalmente despacio o requiera esto como una parte clave de la IU de la página (estoy pensando en los motores de búsqueda, ¿aunque no tendrán la entrada enfocada por defecto?), ciertamente no se compara con el uso de eventos en línea. –

Es una ventaja incontrovertible, así que no entiendo tu punto. El hecho de que termines con el guión mezclado con el marcado es posiblemente una desventaja, lo que no estoy negando. Presenté ambas opciones objetivamente, así que no creo que se justificó un voto a la baja. –

Erm ... no voto negativo. ¿De dónde sacaste eso? –

area = document.getElementById('someid'); 
area.onfocus = function() { 
    if (area.value == 'DEFAULT VALUE HERE') area.value = ''; 
};

Por cierto, focus es mejor que click porque cubre al hacer clic, así como de tabulación en el uso del teclado, otra forma de foco.

Fuente

2010-09-09 11:25:41

Buen punto, 1. Pero ah ... ¿en qué parte del documento colocaría este fragmento para que funcione? –

Como una idea adicional (opcional), debería ser posible verificar contra 'area.defaultValue' en lugar de una cadena predefinida. Pero eso es dividir los pelos. –

'innerHTML' no busca el campo' value', refleja el contenido original del campo que es 'defaultValue', excepto en IE debido a errores. No use 'innerHTML' o' getAttribute ('value') 'en los campos del formulario ya que no hará lo que usted piense. En cambio, como sugiere Pekka, compare 'area.value' con' area.defaultValue'. – bobince

onclick="foobar" es solo una forma de bind event handlers. Es práctica común (¿la mejor?) Vincular manejadores de eventos puramente en JavaScript en lugar de mezclar enlaces de JavaScript con el HTML. (El enlace provisto no proporciona las mejores prácticas para asegurarse de que los objetos DOM que necesita estén disponibles para manipular. Sin embargo, para el aprendizaje, es suficiente, y cuando pase a usar un marco de JavaScript, se manejará para usted (además de inconsistencias del navegador, entre otras cosas)).

Además, es posible que desee comprobar el evento focus en lugar del evento , ya que maneja otros casos como tabular a.

Fuente

2010-09-09 11:26:10 strager

En primer lugar, si los usuarios de su sitio utilizan navegadores web modernos, hay una función relativamente nueva llamada marcadores de posición que puede hacer lo que desee de forma gratuita, es decir, no requiere código adicional.

<textarea name="mytextfield" placeholder="Click here to type"></textarea>

Sin embargo, como dije, esto solo funciona en navegadores relativamente nuevos; los navegadores antiguos lo ignorarán. Sin embargo, el campo seguirá funcionando correctamente, por lo que no se romperá nada en los navegadores antiguos al tener esto; simplemente no mostrarán el marcador de posición. Si puedes vivir con eso, esta sería la mejor opción para ti.

Si eso no es suficiente, entonces necesitarás ir a la ruta de Javascript. Si está utilizando JQuery, hay algunos complementos de JQuery que harán todo el trabajo por usted, lo que lo hace casi tan fácil como la opción de marcador de posición.

Prueba con esto, por ejemplo: http://plugins.jquery.com/project/placeholder (pero tenga en cuenta que hay varios otros disponibles que hacen el mismo trabajo)

Fuente

2010-09-09 11:48:58 Spudley

+1. No me había encontrado con eso. Es un nuevo atributo en HTML5 y aparentemente es compatible con Safari 5, Chrome 6 y Firefox 4. –

Me gusta esta respuesta, pero es una lástima, tengo que hacer que funcione en IE6 = ( – Tek

Limpiando <textarea> con Javascript?

Respuesta

Cuestiones relacionadas