Не відображається заповнювач текстових файлів HTML5

183

Я не можу зрозуміти, що не так з моєю розміткою, але заповнювач для області тексту не з’явиться. Схоже, він може бути прикритий деякими порожніми пробілами та вкладками. Коли ви зосередитесь на текстовій області та видалите з місця, де розміщується курсор, а потім залиште область тексту, тоді з’явиться належний заповнювач місця.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
    <head>
    </head>

    <body>

    <form action="message.php" method="post" id="message_form">
        <fieldset>

            <input type="email" name="email" id="email" title="Email address"
                maxlength="40"
                placeholder="Email Address" 
                autocomplete="off" required />
            <br />
            <input type="text" 
                name="subject" 
                id="subject" title="Subject"
                maxlength="60" placeholder="Subject" autocomplete="off" required />
            <br />
            <textarea name="message" 
                id="message" 
                title="Message" 
                cols="30" 
                rows="5" 
                maxlength="100" 
                placeholder="Message" required>
            </textarea>
            <br />
            <input type="submit" value="Send" id="submit"/>

        </fieldset>
    </form>
</body>

<script>

$(document).ready(function() {        
    $('#message_form').html5form({
        allBrowsers : true,
        responseDiv : '#response',
        messages: 'en',
        messages: 'es',
        method : 'GET',
        colorOn :'#d2d2d2',
        colorOff :'#000'
    }
);
});

</script>

</html>

— рожобуфало
джерело

2

Здається, добре працює: jsfiddle.net/3BzBk ... Не ставте сценарій поза тілом :)

— Marco Johannesen

2

Який браузер ви використовуєте? Не всі браузери підтримують атрибут заповнювача

— Xharze

Ви завжди можете використовувати події onfocus та onblur, щоб отримати однаковий ефект. Крім того, ви можете перевірити, чи підтримується заповнювач заповнення браузером чи ні, скориставшись функцією на зразок: function placeholderIsSupported () {test = document.createElement ('input'); return ('заповнювач місця' у тесті); }

— gentrobot

1

@MarcoJohannesen Дякую! Я ще не можу сказати, що саме відрізняється, але це працює зараз.

— rojobuffalo

1

@ user1338065 Супер. Це було тому, що його розміщували поза тілом або?

— Марко Йоханнесен

671

Цей завжди був гачком для мене та багатьох інших. Коротше кажучи, теги, що відкриваються та закриваються для <textarea>елемента, повинні знаходитись у одному рядку, інакше символ нового рядка займає його. Таким чином, заповнювач заповнення не буде відображатися, оскільки область введення містить вміст (символом нового рядка є, технічно, допустимий вміст).

Добре:

<textarea></textarea>

Погано:

<textarea>
</textarea>

Оновлення (2020)

Це не відповідає дійсності відповідно до специфікації розбору HTML5:

If the next token is a U+000A LINE FEED (LF) character token, 
then ignore that token and move on to the next one. (Newlines 
at the start of textarea elements are ignored as an authoring 
convenience.)

Однак у вас можуть виникнути проблеми, якщо редактор наполягає на тому, щоб закінчувати рядки з CRLF.

— Акварель
джерело

66

Людина, ця відповідь була такою прямолінійною, я не вірив, що це правда! Але я перевірив це на собі і, безумовно, пробіл всередині текстової області вважається вмістом, що запобігає відображенню заповнювача.

— Ерік Л.

Якщо плагін був відредагований, ви можете виправити цю проблему за допомогою .trimметоду jQuery .

— SpYk3HH

Прикладом може бути просто додати фрагмент до JS (до або після виклику плагіна, не має значення), який виглядає наступним чином:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH

Також, створюючи новий елемент textarea після завантаження DOM, обов’язково додайте тег, що закриває, />замість >. Приклад:$('body').html('<textarea placeholder="test" />');

— вироджений

якщо всередині пробілу є пробіл, <textarea>це означає, що текстова область не порожня, значить, не потрібно використовувати для заповнювача. :)

— Edu Ruiz

43

Видаліть усі пробіли та розриви рядків між тегами <textarea>відкриття та закриття </textarea>.

<textarea placeholder="YOUR TEXT"></textarea>  ///Correct one

<textarea placeholder="YOUR TEXT"> </textarea>  ///Bad one It's treats as a value so browser won't display the Placeholder value

<textarea placeholder="YOUR TEXT"> 
</textarea>  ///Bad one

— Провідний розробник
джерело

Простір його вбиває? Дивно.

— AndrewLeonardi

2

Він трактує простір як цінність.

— Ведучий розробник

9

це тому, що десь є простір. Я використовував jsfiddle, і після тегу залишився пробіл. Після того як я видалив простір, він почав працювати

— matthew
джерело

Оце Так! У наступному рядку у мене був закриваючий тег textarea, відступ 4 пробілів> ті невидимі пробіли знаходяться в textarea, але я цього не усвідомлював, поки не спробував використати заповнювач. Немає пробілів між тегами textarea, що відкриваються та закриваються!

— DOK

5

Ну, технічно це не повинно бути на одному рядку, доки між закінченням ">" від початку тега та початковим "<" з тега закриття немає символу. Це вам потрібно закінчити, ...></textarea>як у наведеному нижче прикладі:

<p><label>Comments:<br>
       <textarea id = "comments" rows = "4" cols = "36" 
            placeholder = "Enter comments here"
            class = "valid"></textarea>
    </label>
</p>

— Conny P
джерело

3

Я знаю, що на цю публікацію (дуже добре) відповів Aquarelle, але про всяк випадок, якщо хтось має цю проблему з іншими формами тегів без тексту, наприклад, введення, я залишу це:

Якщо у вас є вхідні дані у формі, а заповнювач не відображається через те, що на початку є пробіл, це може бути спричинено для вас атрибутом "value". Якщо ви використовуєте змінні для заповнення значення вхідної перевірки, чи немає проміжків між комами та змінними.

Приклад використання гілочки для php фреймворку symfony:

<input type="text" name="subject" value="{{ subject }}" placeholder="hello" />       <-- this is ok
<input type="text" name="subject" value" {{ subject }} " placeholder="hello" />      <-- this will not show placeholder

У цьому випадку тег між {{}} є змінною, просто переконайтеся, що ви не залишаєте пробілів між комами, оскільки пробіл також є дійсним символом.

— SpicyTacos23
джерело

2

використовувати <textarea></textarea>замість того, щоб залишати пробіл між тегами, що відкриваються та закриваються як<textarea> </textarea>

— І все-таки
джерело

4

Це нічого не додає, що існуючі відповіді вже не адресують.

— Усі працівники мають важливе значення

0

Між відкриває і закриває тегом в нашому випадку TEXTAREA тега не повинно бути простір або символ нового рядка або будь-який текст (значення).

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

    **PlaceHolder Appears**
    <textarea placeholder="Am Default Message"></textarea>

    **PlaceHolder Doesn't Appear**

    <textarea placeholder="Am Default Message">  </textarea>
   <textarea placeholder="Am Default Message"> 
   </textarea>
   <textarea placeholder="Am Default Message">Something</textarea>

— Єргалем
джерело

0

У мене була та сама проблема, лише використовуючи .pugфайл (схожий на .jade). Я зрозумів, що це також пробіл , після закінчення моїх дужок, що закриваються. У моєму прикладі вам потрібно виділити текст після того, (placeholder="YOUR MESSAGE")щоб побачити:

ПЕРЕД:

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE") 
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

ПІСЛЯ:

form.form-horizontal(method='POST')
  .form-group
    textarea.form-control(placeholder="YOUR MESSAGE")
  .form-group  
    button.btn.btn-primary(type='submit') SUBMIT

— мадулі
джерело

-1

Отже, питання тепер полягає в тому, як ми попередньо заповнимо елемент textarea? XYZ, ви отримаєте:

Основна проблема полягає в тому, що в елементі textarea ми ненавмисно попередньо заповнюємо елемент пробілом.

— Хані
джерело