Как изменить содержимое <textarea> с помощью Javascript

145

Как мне изменить содержимое <textarea>элемента с помощью JavaScript?

Я хочу сделать его пустым.

javascript Ян
источник

Ответы:

253

Как это:

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

или как это в jQuery:

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

Где у вас есть

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

Для всех противников и неверующих:

  • Вот ссылка на MSDN

    Свойство value: извлекает или задает текст в поле ввода элемента textArea.

  • Вот ссылка на MDN

    value DOMString Необработанное значение, содержащееся в элементе управления.

Грег
источник
Не думал, что ценность будет работать, потому что нет. value = в нем, но спасибо!
ian
1
не работает в Internet Explorer на мобильных устройствах Windows.
Пол
11
не работает с chrome v61, значение не влияет на то, что находится в поле ввода
Aero Wang
15

Если вы можете использовать jQuery, а я настоятельно рекомендую вам это сделать, вы просто выполните

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

В противном случае это зависит от браузера. Предполагая, что у вас есть

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

В большинстве браузеров вы делаете

myTextArea.innerHTML = '';

Но в Firefox вы делаете

myTextArea.innerText = '';

Выяснение того, какой браузер использует пользователь, оставлено читателю в качестве упражнения. Если, конечно, вы не используете jQuery;)

Изменить : я беру это обратно. Похоже, поддержка .innerHTML в текстовых полях улучшилась. Я тестировал в Chrome, Firefox и Internet Explorer, все они правильно очистили текстовое поле.

Изменить 2 : И я только что проверил, если вы используете .val ('') в jQuery, он просто устанавливает свойство .value для textarea. Так что .value должно быть в порядке.

Аистина
источник
3
.value = ''; работает в Chrome FF и Safari ... .innerHTML не работает в Chrome, в других не тестировал.
ian
1
Вы не должны использовать innerHTML и innerText для текстовых полей. Следует использовать атрибут значения. . Таким образом, $ ( '# myTextArea') Вал ( '') или document.getElementById ( 'myTextArea'). Значение = '' лучший вариант
Parth
8

Хотя уже было дано много правильных ответов, классический (читай не-DOM) подход будет таким:

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

где в HTML ваше текстовое поле вложено где-то в такой форме:

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

Как оказалось, это также будет работать с Netscape Navigator 4 и Internet Explorer 3. И, что немаловажно, Internet Explorer на мобильных устройствах.

Павел
источник
2

поместите текстовое поле в форму, назовите их и просто используйте объекты dom, например:

<body onload="form1.box.value = 'Welcome!'">
  <form name="form1">
    <textarea name="box"></textarea>
  </form>
</body>
Шрди
источник