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

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:

Aqui está a referência do MSDN

Propriedade value: recupera ou define o texto no campo de entrada do elemento textArea.
Aqui está a referência MDN

valor DOMString O valor bruto contido no controle.

— 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

Se é Jquery ..

$("#myText").val('');

ou

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

http://www.hscripts.com/tutorials/javascript/dom/textarea-events.php

— TigerTiger
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