Cómo cambiar el contenido de un <textarea> con Javascript

139

¿Cómo cambiaría el contenido de un <textarea>elemento con JavaScript?

Quiero dejarlo vacío.

javascript ian
fuente

Respuestas:

244

Me gusta esto:

document.getElementById('myTextarea').value = '';

o así en jQuery:

$('#myTextarea').val('');

Donde tienes

<textarea id="myTextarea" name="something">This text gets removed</textarea>

Para todos los votantes negativos y no creyentes:

Greg
fuente
No pensé que el valor funcionaría porque no hay. valor = en él pero gracias!
ian
1
no funciona en Internet Explorer en dispositivos móviles con Windows.
Paul
9
no funciona con Chrome v61, el valor no afecta el que está en el cuadro de entrada
Aero Wang
15

Si puede usar jQuery, y le recomiendo que lo haga, simplemente lo haría

$('#myTextArea').val('');

De lo contrario, depende del navegador. Asumiendo que tienes

var myTextArea = document.getElementById('myTextArea');

En la mayoría de los navegadores lo haces

myTextArea.innerHTML = '';

Pero en Firefox, lo haces

myTextArea.innerText = '';

Averiguar qué navegador está utilizando el usuario se deja como ejercicio para el lector. A menos que use jQuery, por supuesto;)

Editar : Retiro eso. Parece que el soporte para .innerHTML en textarea ha mejorado. Probé en Chrome, Firefox e Internet Explorer, todos borraron el área de texto correctamente.

Edición 2 : y acabo de marcar, si usa .val ('') en jQuery, solo establece la propiedad .value para el área de texto. Entonces .value debería estar bien.

Aistina
fuente
3
.value = ''; funciona en Chrome FF y Safari ... .innerHTML no funciona en Chrome no probó en otros.
ian
1
No debe usar innerHTML e innerText para áreas de texto. Se debe usar el atributo de valor. Entonces, $ ('# myTextArea'). Val ('') o document.getElementById ('myTextArea'). Value = '' es la mejor opción
Parth
8

Aunque ya se han dado muchas respuestas correctas, el enfoque clásico (leer sin DOM) sería así:

document.forms['yourform']['yourtextarea'].value = 'yourvalue';

donde en el HTML su área de texto está anidada en algún lugar de una forma como esta:

<form name="yourform">
    <textarea name="yourtextarea" rows="10" cols="60"></textarea>
</form>

Y como sucede, eso también funcionaría con Netscape Navigator 4 e Internet Explorer 3. Y, no sin importancia, Internet Explorer en dispositivos móviles.

Pablo
fuente
2

coloque el área de texto en un formulario, nombrándolos, y simplemente use los objetos dom fácilmente, de esta manera:

<body onload="form1.box.value = 'Welcome!'">
  <form name="form1">
    <textarea name="box"></textarea>
  </form>
</body>
Shrdi
fuente