HTML5 textarea заполнитель не отображается

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

<!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>
7 131
forms jquery html5 textarea placeholder

7 ответов:

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

хорошо:

<textarea></textarea>

плохое:

<textarea>
</textarea>
491

удалить все пробелы и переносы строк между тегами <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
28

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

9

ну, технически это не должно быть в одной строке, пока нет символа между окончанием ">" от начального тега и началом "...></textarea> как в примере ниже:

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

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

2

между открывающим и закрывающим тегом в нашем случае тег 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

у меня была такая же проблема, только с помощью (аналог .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
0