Как добавить значение по умолчанию для html <textarea>? [закрыто]

350

Я хочу установить значение по умолчанию для моего HTML <textarea>. Я прочитал из материала, что для добавления значения по умолчанию вы должны сделать что-то вроде <textarea>This is default text</textarea>. Я сделал это, но это не работает. Что правильно сделать?

Новичок кодер
источник
1
То, как вы показываете, как это должно работать. Покажите свой HTML-код, если это не так
Пекка
покажите свой HTML, пожалуйста ...
Даниэль Рамирес-Эскудеро
1
Набор ответов на вопрос без отмеченной в нем попытки кода. Давайте рассмотрим вопрос без этой попытки, чтобы вопрос не подвергался «без кода» или «больше не мог быть воспроизведен» по близким причинам.
Циварев

Ответы:

621

Вот мой пример jsFiddle . это работает нормально:

<textarea name='awesome'>Default value</textarea>
Эндрю Джекман
источник
94

Вы можете использовать атрибут- заполнитель , который не добавляет значение по умолчанию, но может быть тем, что вы ищете:

<textarea placeholder="this text will show in the textarea"></textarea>

Проверьте это здесь - http://jsfiddle.net/8DzCE/949/ введите описание изображения здесь

Важное примечание (как предложил Джон Брэйв в комментариях) :

Атрибут Placeholder не устанавливает значение текстовой области. Скорее «Атрибут placeholder представляет краткую подсказку (слово или короткую фразу), предназначенную для помощи пользователю с вводом данных, когда элемент управления не имеет значения» [и он исчезает, как только пользователь щелкает текстовую область]. Он никогда не будет действовать как «значение по умолчанию» для элемента управления. Если вы хотите, вы должны поместить желаемый текст в поле «Здесь есть фактическое значение по умолчанию», как и в других ответах здесь.

bhavya_w
источник
14
Вы должны пояснить, что placeholderне устанавливает значение a textarea. Скорее «Атрибут placeholder представляет короткую подсказку (слово или короткую фразу), предназначенную для помощи пользователю с вводом данных, когда элемент управления не имеет значения» [и он исчезает, как только пользователь щелкает текстовую область]. Он никогда не будет действовать как «значение по умолчанию» для элемента управления. Если вы хотите этого, вы должны поместить желаемый текст внутри <textarea>Here is the actual default value</textarea>, как в других ответах здесь.
JonBrave
10
На самом деле это очень опасное решение. Пожалуйста, никогда не путайте заполнитель со значением по умолчанию.
Qwerty
@Qwerty - Да, мы не должны путать заполнитель со значением по умолчанию. Но опасно .... Можете ли вы привести какой-либо пример / случай, где и как это может быть опасно (способным или способным причинить вред или травму)?
bhavya_w
1
Заполнитель не отправит в форме. Это опасно, если вы или ваш пользователь ожидаете его отправки.
Qwerty
2
Если значение не будет отправлено, это не значение по умолчанию, а скорее подсказка. Если я ищу значение по умолчанию, я ожидаю, что оно будет вести себя как значение по умолчанию, и что опасно, так это то, что это не демонстрирует ожидаемого поведения. Опасно полагать, что это решение решит то, о чем просили. Но это верно для вас , чтобы предположить , что я действительно искал А , но прошу B . И если вы неявно заявите, что в своем ответе ваш ответ будет законным. Вы правы, что речь идет о нехватке знаний, но люди, которые ищут этот ответ, не имеют этих знаний.
Qwerty
20

Если вы хотите перенести информацию из базы данных в тег textarea для редактирования: тег ввода не должен отображать данные, которые занимают несколько строк: строки не работают, ввод тега - одна строка.

<!--input class="article-input" id="article-input" type="text" rows="5" value="{{article}}" /-->

Тег textarea не имеет значения , но отлично работает с рулями

<textarea class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea> 
user2519992
источник
9

На всякий случай, если вы используете Angular.js в своем проекте (как и я), и у вас есть ng-modelнабор для него <textarea>, устанавливающий значение по умолчанию внутри, например:

<textarea ng-model='foo'>Some default value</textarea>

...не будет работать!

Вам необходимо установить значение по умолчанию для текстовой области ng-modelв соответствующем контроллере или использовать ng-init.

Пример 1 (с использованием ng-init):

Пример 2 (без использования ng-init):

Рахул Десаи
источник
1
Ай нашел этот stackoverflow.com/a/25391822/2199525 - сделал вещи еще яснее.
leymannx
7

Несколько замечаний и разъяснений:

  • placeholder='' вставляет ваш текст, но он выделяется серым цветом (в формате подсказки), и в тот момент, когда поле щелкается, ваш текст заменяется пустым текстовым полем.

  • value=''не является <textarea>атрибутом, а работает только для <input>тегов, т. е. <input type='text'>и т. д. Я не знаю, почему создатели HTML5 решили не включать это, но пока так оно и есть.

  • Наилучший метод для вставки текста в <textarea>элементы был правильно изложен здесь как: <textarea> Desired text to be inserted into the field upon page load </textarea>Когда пользователь щелкает поле, он может редактировать текст, и он остается в поле (в отличие от placeholder='').

  • Примечание: Если вставить текст между <textarea>и </textarea>тегами, вы не можете использовать , placeholder=''как он будет перезаписан вашим вставленным текстом.
twknab
источник
6

Когда я делаю что-то вроде этого, это работает для меня:

<textarea name="test" rows="4" cols="6">My Text</textarea>
Арун Радж
источник
4

Кроме того, это работало очень хорошо для меня:

<textarea class="form-control" rows="3" name="msg" placeholder="Your message here." onfocus='this.select()'>
<?php if (isset($_POST['encode'])) { echo htmlspecialchars($_POST['msg']);} ?>
</textarea>

В этом случае $ _POST ['encode'] получено из этого:

<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">

Код PHP был вставлен между тегами и.

winthropite
источник
3

Заполнитель не может установить значение по умолчанию для текстовой области. Ты можешь использовать

<textarea rows="10" cols="55" name="description"> /*Enter default value here to display content</textarea>

Это тег, если вы используете его для подключения к базе данных. Вы можете использовать другой синтаксис, если вы используете другие языки, кроме php. Для php:

например:

<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>

Команда required минимизирует усилия, необходимые для проверки пустых полей с помощью php.

А.А.
источник
1

Вы можете использовать this.innerHTML.

<textarea name="message" rows = "10" cols = "100" onfocus="this.innerHTML=''"> Enter your message here... </textarea>

Когда текстовая область сфокусирована, это в основном делает innerHTML текстовой области пустой строкой.

strahd
источник
-1

Обратите внимание, что если вы внесли изменения в textarea, после того, как он был отрендерен; Вы получите обновленное значение вместо инициализированного значения.

<!doctype html>
<html lang="en">
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
            $(function () {
                $('#btnShow').click(function () {
                    alert('text:' + $('#addressFieldName').text() + '\n value:' + $('#addressFieldName').val());
                });
            });
            function updateAddress() {
                $('#addressFieldName').val('District: Peshawar \n');
            }
        </script>
    </head>
    <body>
        <?php
        $address = "School: GCMHSS NO.1\nTehsil: ,\nDistrict: Haripur";
        ?>
        <textarea id="addressFieldName" rows="4" cols="40" tabindex="5" ><?php echo $address; ?></textarea>
        <?php echo '<script type="text/javascript">updateAddress();</script>'; ?>
        <input type="button" id="btnShow" value='show' />
    </body>
</html>

Как вы можете видеть, значение textarea будет отличаться от текста между открывающим и закрывающим тегом беспокойства textarea.

Адель Раза Азими
источник
-5

Вы также можете добавить атрибут value и установить его так:


<textarea value="your value"> </textarea>
monsterpiece
источник
1
Из документации MDN : « <textarea>не поддерживает valueатрибут».
Робби Корнелиссен
При написании в React стоит соответствовать HTML-спецификации.
Томаш