programing

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

javajsp 2023. 8. 17. 20:45

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>

업데이트(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로 줄을 끊어야 한다면 여전히 문제가 있을 수 있습니다.

사이의 모든 공백 및 줄 바꿈 삭제<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 

어딘가에 공간이 있기 때문입니다.jsfiddle을 사용하고 있는데 태그 뒤에 공백이 있습니다.공간을 삭제한 후 작동하기 시작했습니다.

기술적으로 시작 태그의 끝 ">"와 종료 태그의 시작 "<" 사이에 문자가 없는 한 동일한 줄에 있을 필요는 없습니다.그게 바로 당신이 끝내야 할 일입니다....></textarea>아래 예와 같이:

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

나는 이 게시물이 아쿠아렐레에 의해 (매우 잘) 응답되었다는 것을 알고 있지만 누군가 입력과 같은 텍스트가 없는 다른 태그 양식에 이 문제가 발생할 경우를 대비하여 여기에 이것을 남기겠습니다.

양식에 입력한 내용이 있지만 시작 부분에 공백이 있어 자리 표시자가 표시되지 않는 경우, "값" 속성이 원인일 수 있습니다.입력 값을 채우기 위해 변수를 사용하는 경우 쉼표와 변수 사이에 공백이 없는지 확인합니다.

php 프레임워크 symfony에 twig를 사용한 예:

<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 

이 경우 {{}} 사이의 태그가 변수입니다. 공백도 유효한 문자이므로 쉼표 사이에 공백을 두지 않도록 하십시오.

사용하다<textarea></textarea>여는 태그와 닫는 태그 사이에 공백을 두는 대신<textarea> </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>

나도 같은 문제가 있었는데, 오직 a를 사용했습니다..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

언급URL : https://stackoverflow.com/questions/10186913/html5-textarea-placeholder-not-appearing