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

350

Закрыто. Этот вопрос не воспроизводится или был вызван опечатками . В настоящее время он не принимает ответы.

Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме переполнения стека.

Закрыто 9 месяцев назад .

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

html 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):

Показать фрагмент кода

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  // your controller implementation here
}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <textarea ng-init='foo="Some default value"' ng-model='foo'></textarea>
    </div>
  </body>
</html>

Развернуть фрагмент

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

Показать фрагмент кода

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  $scope.foo = 'Some default value';
}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <textarea ng-model='foo'></textarea>
    </div>
  </body>
</html>

Развернуть фрагмент

— Рахул Десаи
источник

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-спецификации.

— Томаш