Вопрос по jquery, html5 – HTML5 textarea заполнитель не появляется

144

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

<code><!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>
</code>
Вы всегда можете использовать события onfocus и onblur, чтобы получить одинаковый эффект. Кроме того, вы можете проверить, поддерживается ли местозаполнитель браузером или нет, используя такую функцию, как: function placeholderIsSupported () {test = document.createElement ('input'); возврат («заполнитель» в тесте); } gentrobot
Кажется, работает нормально: Jsfiddle.net / 3BzBk ... Не размещайте сценарий вне тела Marco Johannesen
Какой браузер вы используете? Не все браузеры поддерживают атрибут placeholder Xharze
@ MarcoJohannesen Спасибо! Я пока не могу точно сказать, что отличается, но сейчас это работает. rojobuffalo
@ user1338065 Супер. Было ли это потому, что он был расположен вне тела или? Marco Johannesen

Ваш Ответ

8   ответов
9

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

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

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

Хорошо

<textarea></textarea>

Плохо

<textarea>
</textarea>
если есть пробел внутри<textarea> это означает, что текстовое поле не пустое, поэтому нет места для заполнителя. :) Edu Ruiz
Например, можно просто добавить кусок в JS (до или после вызова плагина, не имеет значения), который выглядит следующим образом:$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); }); SpYk3HH
Если плагин был отредактирован, вы можете исправить эту проблему, используя jQuery's.trim метод. SpYk3HH
Кроме того, при создании нового элемента textarea после загрузки DOM обязательно включайте закрывающий тег/> вместо того>. Пример:$('body').html('<textarea placeholder="test" />'); degenerate
Человек, этот ответ был так прост, я не верил, что это правда! Но я проверил это для себя и, конечно же, пробелы внутри текстовой области считаются содержимым, что препятствует отображению заполнителя. Eric Lawler
34

Удалите все пробелы и разрывы строк между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
Он рассматривает пространство как значение. Mahendra Jella
4

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

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

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

Это ничего не добавляет, что существующие ответы еще не адресованы. cpburnz
2

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

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

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

В этом случае тег между {{}} является переменной, просто убедитесь, что вы не оставляете пробелы между запятыми, потому что пробел также является допустимым символом.

0

олжен бытьКосмо или символ новой строки или любой текст (значение).

Если есть пробел, символ новой строки или любой текст, он считается значением, которое переопределяет заполнитель.

    **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 file (аналогично.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

Похожие вопросы