HTML5 textarea заполнитель не появляется

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>

— rojobuffalo
источник

2

Кажется, работает нормально: jsfiddle.net/3BzBk ... Не размещайте сценарий вне тела :)

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

2

Какой браузер вы используете? Не все браузеры поддерживают атрибут placeholder

— Xharze

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

— гентробот

1

@MarcoJohannesen Спасибо! Я пока не могу точно сказать, что отличается, но сейчас это работает.

— Рожобуффало

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>это означает, что текстовая область не пуста, поэтому заполнитель не нужен. :)

— Эду Руис

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

— Ведущий разработчик
источник

Пространство убивает это? Weird.

— AndrewLeonardi

2

Он рассматривает пространство как ценность.

— Ведущий разработчик

9

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

— Мэтью
источник

Вот Это Да! У меня был закрывающий тег textarea на следующей строке с отступом в 4 пробела> эти невидимые пробелы находятся в текстовой области, но я не осознавал этого, пока не попытался использовать заполнитель. Нет пробелов между открывающими и закрывающими тегами textarea!

— DOK

5

Ну, технически это не обязательно должно быть в одной строке, если нет символа между конечным «>» из начального тега и начальным «<» из закрывающего тега. На этом вам нужно закончить ...></textarea>как в примере ниже:

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

— Конни П
источник

3

Я знаю, что на этот пост (очень хорошо) ответил Aquarelle, но на тот случай, если у кого-то возникнут проблемы с другими формами тегов без текста, такими как входные данные, я оставлю это здесь:

Если в вашей форме есть входные данные, а заполнитель не отображается из-за пробела в начале, это может быть связано с атрибутом «значение». В случае, если вы используете переменные для заполнения значения ввода, убедитесь, что между запятыми и переменными нет пробелов.

пример использования ветки для 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>

— Yergalem
источник

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

— maudulus
источник

-1

Итак, вопрос теперь в том, как нам предварительно заполнить элемент textarea? XYZ, вы получите:

Основная проблема заключается в том, что в элементе textarea мы непреднамеренно заполняем элемент пробелом.

— Хани
источник