Як додати значення за замовчуванням для html <textarea>? [зачинено]

349

Зачинено. Це питання не відтворюється або було викликане помилками друку . Наразі відповіді не приймаються.

Хочете вдосконалити це питання? Оновіть питання, щоб воно було тематичним для переповнення стека.

Закрито 9 місяців тому .

Я хочу встановити для мого html значення за замовчуванням <textarea>. Я читаю з матеріалу, що для додавання значення за замовчуванням потрібно зробити щось на кшталт <textarea>This is default text</textarea>. Я це зробив, але це не працює. Що правильно робити?

html textarea

— Новачок-кодер
джерело

1

Як ви показуєте, як це має працювати. Покажіть свій HTML-код, якщо його немає

— Pekka

покажіть свій html будь ласка ...

— Даніель Рамірес-Ескудеро

1

Відповіді набір питань без спроби коду, зазначеної в ньому. Дозволяємо розглянути питання без цієї спроби, тому питання не піддаватиметься з причини "без коду" або "більше не може бути відтворено" з близьких причин.

— Циварев

620

Ось мій приклад jsFiddle . це добре працює:

<textarea name='awesome'>Default value</textarea>

— Ендрю Джекман
джерело

94

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

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

Перевірте це - http://jsfiddle.net/8DzCE/949/

Важлива примітка (Як запропонував Джон Брейв у коментарях) :

Атрибут власника заповнення не встановлює значення текстової області. Скоріше, "атрибут заповнювача заповнення являє собою короткий натяк (слово або коротка фраза), призначений допомогти користувачеві з введенням даних, коли елемент управління не має значення" [і він зникає, як тільки користувач натискає на текстову область]. Він ніколи не буде діяти як "значення за замовчуванням" для елемента керування. Якщо ви цього хочете, ви повинні ввести потрібний текст всередині. Тут є фактичне значення за замовчуванням, відповідно до інших відповідей тут

— bhavya_w
джерело

14

Вам слід уточнити, що placeholderне встановлено значення a textarea. Скоріше, "атрибут заповнювача заповнення являє собою короткий натяк (слово або коротка фраза), призначений допомогти користувачеві з введенням даних, коли елемент управління не має значення" [і він зникає, як тільки користувач натискає на текстову область]. Він ніколи не буде діяти як "значення за замовчуванням" для елемента керування. Якщо ви цього хочете, ви повинні помістити потрібний текст всередині <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>

— користувач2519992
джерело

9

Про всяк випадок, якщо ви використовуєте Angular.js у своєму проекті (як я) і маєте ng-modelнабір для свого <textarea>, встановивши типовий параметр всередині, як:

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

... не вийде!

Потрібно встановити значення за замовчуванням для textarea's 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 ['кодування'] походить від цього:

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

PHP-код було вставлено між тегами та.

— винтропіт
джерело

3

Заполнитель не може встановити значення за замовчуванням для області тексту. Можна використовувати

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

Це тег, якщо ви використовуєте його для підключення до бази даних. Ви можете використовувати інший синтаксис, якщо ви використовуєте інші мови, ніж php.For php:

наприклад:

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

необхідна команда мінімізує зусилля, необхідні для перевірки порожніх полів за допомогою php.

— АА
джерело

1

Ви можете використовувати this.innerHTML.

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

Розгорніть фрагмент

Коли область тексту сфокусована, вона в основному робить внутрішнійHTML текстової області порожнім рядком.

— страх
джерело

-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>

— чудовисько
джерело

1

З документації MDN : " <textarea>не підтримує valueатрибут".

— Робі Корнеліссен

Писати в React варто узгодити зі специфікацією HTML.

— Томаш