Como alterar o conteúdo de uma <textarea> com Javascript

139

Como eu alteraria o conteúdo de um <textarea>elemento com JavaScript?

Eu quero torná-lo vazio.

javascript ian
fonte

Respostas:

244

Como isso:

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

ou assim no jQuery:

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

Onde você tem

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

Para todos os que recusam e os que não crêem:

Greg
fonte
Não achava que o valor funcionaria porque não existe. value = nele, mas obrigado!
ian
1
não funciona no Internet Explorer em dispositivos móveis Windows.
Paul
9
não funciona com o Chrome V61, o valor não faz efeito que está na caixa de entrada
Aero Wang
15

Se você pode usar o jQuery, e eu recomendo que você faça, você simplesmente faria

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

Caso contrário, depende do navegador. Supondo que você tenha

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

Na maioria dos navegadores você faz

myTextArea.innerHTML = '';

Mas no Firefox você faz

myTextArea.innerText = '';

Descobrir qual navegador o usuário está usando é deixado como um exercício para o leitor. A menos que você use o jQuery, é claro;)

Edit : Eu retiro isso. Parece que o suporte ao .innerHTML nas áreas de texto melhorou. Eu testei no Chrome, Firefox e Internet Explorer, todos eles limparam a área de texto corretamente.

Edit 2 : E acabei de verificar, se você usar .val ('') no jQuery, ele apenas define a propriedade .value para as áreas de texto. Portanto, o valor deve ficar bem.

Aistina
fonte
3
.valor = ''; funciona no Chrome FF e Safari ... .innerHTML não funciona no Chrome, não foi testado em outras pessoas.
ian
1
Você não deve usar innerHTML e innerText para áreas de texto. O atributo value deve ser usado. Então, $ ('# myTextArea'). Val ('') ou document.getElementById ('myTextArea'). Value = '' é a melhor opção
Parte
8

Embora muitas respostas corretas já tenham sido dadas, a abordagem clássica (leia não DOM) seria assim:

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

onde no HTML sua área de texto está aninhada em algum lugar de uma forma como esta:

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

E, por acaso, isso também funcionaria com o Netscape Navigator 4 e o Internet Explorer 3. E, sem importância, o Internet Explorer em dispositivos móveis.

Paulo
fonte
2

coloque a área de texto em um formulário, nomeando-os e use os objetos dom facilmente, assim:

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