Programing

HTML5 텍스트 영역 자리 표시자가 나타나지 않음

lottogame 2020. 6. 4. 07:47
반응형

HTML5 텍스트 영역 자리 표시자가 나타나지 않음


마크 업에 어떤 문제가 있는지 파악할 수 없지만 텍스트 영역의 자리 표시자는 나타나지 않습니다. 빈 공간과 탭으로 덮여있는 것처럼 보입니다. 텍스트 영역에 초점을 맞추고 커서가있는 위치에서 삭제 한 다음 텍스트 영역을 벗어나면 적절한 자리 표시자가 나타납니다.

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

이것은 저와 다른 많은 사람들에게 항상 문제가되었습니다. 요컨대, <textarea>요소 의 여는 태그와 닫는 태그 는 같은 줄에 있어야합니다. 그렇지 않으면 줄 바꿈 문자가 해당 줄을 차지합니다. 따라서 입력 영역에 내용 (개행 문자는 기술적으로 유효한 내용)이 포함되어 있으므로 자리 표시자가 표시되지 않습니다.

좋은:

<textarea></textarea>

나쁜:

<textarea>
</textarea>

<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 

its because there is a space somewhere. I was using jsfiddle and there was a space after the tag. After I deleted the space it started working


Well, technically it does not have to be on the same line as long as there is no character between the ending ">" from start tag and the starting "<" from the closing tag. That is you need to end with ...></textarea> as in the example below:

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

use <textarea></textarea> instead of leaving a space between the opening and closing tags as <textarea> </textarea>


I know this post has been (very well) answered by Aquarelle but just in case somebody is having this issue with other tag forms with no text such as inputs i'll leave this here:

If you have an input in your form and placeholder is not showing because a white space at the beginning, this may be caused for you "value" attribute. In case you are using variables to fill the value of an input check that there are no white spaces between the commas and the variables.

example using twig for 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 

In this case the tag between {{ }} is the variable, just make sure you are not leaving spaces between the commas because white space is also a valid character.


Between the opening and closing tag in our case textarea tag shouldn't be space or newline character or any text(value).

If there's space, newline character or any text, it's considered as value which overrides placeholder.

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

I had the same issue, only using a .pug file (similar to .jade). I realized that it was also a space issue, following the end of my closing parentheses. In my example, you need to highlight the text after (placeholder="YOUR MESSAGE") to see:

BEFORE:

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

AFTER:

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

참고URL : https://stackoverflow.com/questions/10186913/html5-textarea-placeholder-not-appearing

반응형