Jak zmienić zawartość <textarea> za pomocą JavaScript

139

Jak zmienić zawartość <textarea>elementu za pomocą JavaScript?

Chcę, żeby był pusty.

javascript Jan
źródło

Odpowiedzi:

244

Lubię to:

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

lub tak w jQuery:

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

Gdzie masz

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

Dla wszystkich zwolenników i niewierzących:

Greg
źródło
Nie sądziłem, że wartość zadziała, ponieważ nie ma. wartość = w nim, ale dzięki!
Ian
1
nie działa w przeglądarce Internet Explorer na urządzeniach mobilnych z systemem Windows.
Paul
9
nie działa z chrome v61, wartość nie ma wpływu na pole wejściowe
Aero Wang
15

Jeśli możesz używać jQuery, a bardzo polecam, po prostu to zrobisz

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

W przeciwnym razie zależy to od przeglądarki. Zakładając, że masz

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

W większości przeglądarek tak

myTextArea.innerHTML = '';

Ale w Firefoksie tak

myTextArea.innerText = '';

Dowiedzenie się, z jakiej przeglądarki korzysta użytkownik, pozostaje ćwiczeniem dla czytelnika. Chyba że używasz jQuery oczywiście;)

Edycja : cofam to. Wygląda na to, że poprawiła się obsługa .innerHTML w obszarze tekstowym. Testowałem w Chrome, Firefox i Internet Explorer, wszystkie poprawnie wyczyściły obszar tekstu.

Edycja 2 : I właśnie sprawdziłem, jeśli używasz .val ('') w jQuery, po prostu ustawia właściwość .value dla textarea. Więc .value powinno wystarczyć.

Aistina
źródło
3
.value = ''; działa w Chrome FF i Safari ... .innerHTML nie działa w Chrome nie testował w innych.
Ian
1
Nie należy używać innerHTML i innerText dla obszarów tekstowych. Należy użyć atrybutu value. Tak więc $ ('# myTextArea'). Val ('') lub document.getElementById ('myTextArea'). Value = '' to najlepsza opcja
Parth
8

Chociaż udzielono już wielu poprawnych odpowiedzi, klasyczne (czytaj nie-DOM) podejście wyglądałoby tak:

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

gdzie w kodzie HTML twój obszar tekstowy jest zagnieżdżony gdzieś w takiej postaci:

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

I tak się składa, że ​​działałoby to również z Netscape Navigator 4 i Internet Explorer 3. Nie bez znaczenia jest też Internet Explorer na urządzeniach mobilnych.

Paweł
źródło
2

umieść textarea w formularzu, nadając im nazwy i po prostu używaj obiektów dom z łatwością, na przykład:

<body onload="form1.box.value = 'Welcome!'">
  <form name="form1">
    <textarea name="box"></textarea>
  </form>
</body>
Shrdi
źródło