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

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>

— 로조 버팔로
소스

2

잘 작동하는 것 같습니다 : jsfiddle.net/3BzBk ... 본문 외부에 스크립트를 두지 마십시오 :)

— Marco Johannesen

2

어떤 브라우저를 사용하고 있습니까? 모든 브라우저가 플레이스 홀더 속성을 지원하는 것은 아닙니다.

— Xharze

항상 onfocus 및 onblur 이벤트를 사용하여 동일한 효과를 얻을 수 있습니다. 또한 자리 표시자가 브라우저에서 지원되는지 여부를 테스트 할 수 있습니다. function placeholderIsSupported () {test = document.createElement ( 'input'); 반환 (테스트에서 '자리 표시 자'); }

— gentrobot

1

@MarcoJohannesen 감사합니다! 아직 정확히 다른 것을 말할 수는 없지만 지금은 작동합니다.

— rojobuffalo

1

슈퍼. 몸 밖에 있었기 때문입니까?

— Marco Johannesen

669

이것은 저와 다른 많은 사람들에게 항상 문제가되었습니다. 요컨대, <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

이 대답은 너무 간단해서 나는 그것이 사실이라고 믿지 않았습니다! 그러나 나는 그것을 직접 테스트했으며 텍스트 영역 내부의 공백은 내용으로 간주되어 자리 표시자가 표시되지 않도록합니다.

— Eric L.

플러그인이 편집 된 경우 jQuery의 .trim메소드를 사용하여이 문제를 해결할 수 있습니다 .

— SpYk3HH

예를 들어, 다음과 같이 JS에 플러그인을 추가하기 만하면됩니다 (플러그인 호출 전후에 중요하지 않음).$('textarea'),each(function(i) { if ($.trim($(this).text()) == '') $(this).text('').trigger('blur'); });

— SpYk3HH

또한 DOM이로드 된 후 새 textarea 요소를 만들 때는 />대신 닫는 태그를 포함해야합니다 >. 예 :$('body').html('<textarea placeholder="test" />');

— 퇴보

안에 공백이 있으면 <textarea>텍스트 영역이 비어 있지 않다는 것을 의미하므로 자리 표시자는 사용할 수 없습니다. :)

— Edu Ruiz

42

<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

— 수석 개발자
소스

우주는 그것을 죽인다? 기묘한.

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

— 코니 P
소스

3

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

양식에 입력이 있고 처음에 공백으로 인해 자리 표시자가 표시되지 않으면 "value"속성이 원인 일 수 있습니다. 변수를 사용하여 입력 값을 채우는 경우 쉼표와 변수 사이에 공백이 없는지 확인하십시오.

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

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

— 짜릿한
소스

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>

— 예르 갈렘
소스

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

— 마우 둘 루스
소스

-1

이제 질문은 textarea 요소를 어떻게 미리 채우는가입니다. XYZ, 당신은 얻을 것이다 :

주요 문제는 textarea 요소에서 실수로 요소를 공백으로 미리 채우는 것입니다.

— 하니
소스