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

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:

Oto odniesienie do MSDN

value Właściwość: pobiera lub ustawia tekst w polu wprowadzania elementu textArea.
Oto odniesienie do MDN

wartość DOMString Surowa wartość zawarta w kontrolce.

— 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

Jeśli to Jquery ..

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

lub

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

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

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