<textarea>에 여러 줄로 된 HTML5 자리 표시 자 텍스트를 사용할 수 있습니까?

HTML5의 자리 표시 자 속성을 사용하여 초점을 맞추면 사라지는 텍스트 필드에 유령 텍스트가 있습니다.

<input type="text" name="email" placeholder="Enter email"/>

동일한 메커니즘을 사용하여 텍스트 영역에 여러 줄 자리 표시 자 텍스트를 만들려고합니다.

<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>

그러나 그 \n텍스트는 텍스트에 나타나고 줄 바꿈을 일으키지 않습니다 ... 여러 줄 자리 표시자를 가질 수있는 방법이 있습니까?

업데이트 :이 작업을 수행 할 수있는 유일한 방법은 자리 표시 자 텍스트에서 HTML을 허용하는 jQuery Watermark 플러그인 을 사용하는 것입니다.

$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});

대한 <textarea>의 사양은 특별히 자리 표시 자 속성에서 그 캐리지 리턴 + 줄 바꿈이 브라우저로 바꿈으로 렌더링되어야 설명합니다.

사용자 에이전트는 요소의 값이 빈 문자열이고 컨트롤에 포커스가없는 경우 (예 : 빈 포커스되지 않은 컨트롤 안에 표시)이 힌트를 사용자에게 제공해야합니다. 힌트의 모든 U + 000D 캐리지 리턴 U + 000A LINE FEED 문자 쌍 (CRLF) 및 힌트의 다른 모든 U + 000D 캐리지 리턴 (CR) 및 U + 000A LINE FEED (LF) 문자는 처리해야합니다. 힌트를 렌더링 할 때 줄 바꿈으로.

MDN에도 반영 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder

FWIW, Chrome 63.0.3239.132를 사용하려고하면 실제로 제대로 작동합니다.

에 대부분의 자바 스크립트의 자리는 여러 자리 수 있도록 편집, 브라우저 (자세한 내용은 아래 참조). 말했듯이, 사양을 준수 하지 않으므로 향후 사양 이 작동하지 않을 것으로 예상됩니다 (편집 : 작동 함).

이 예제는 모든 여러 줄 문자 영역의 자리 표시자를 대체 합니다 .

var textAreas = document.getElementsByTagName('textarea');

Array.prototype.forEach.call(textAreas, function(elem) {
    elem.placeholder = elem.placeholder.replace(/\\n/g, '\n');
});

<textarea class="textAreaMultiline" 
          placeholder="Hello, \nThis is multiline example \n\nHave Fun"
          rows="5" cols="35"></textarea>

_{JSFiddle 스 니펫.}

의견에 따르면 일부 브라우저는이 해킹을 허용하고 다른 브라우저는 허용하지 않는 것으로 보입니다.
이것은 내가 실행 한 테스트 결과입니다 ( browsertshots 및 browserstack 사용 )

• 크롬 :> = 35.0.1916.69
• Firefox :> = 35.0 (결과는 플랫폼에 따라 다름)
• IE :> = 10
• KHTML 기반 브라우저 : 4.8
• Safari : 아니요 (테스트 된 = Safari 8.0.6 Mac OS X 10.8)
• 오페라 : 아니요 (테스트 <= 15.0.1147.72)

이러한 통계 로 인해 현재 (2015 년 10 월) 사용 된 브라우저 의 약 88.7 % 에서 작동 합니다.

업데이트 : 현재, 현재 (2018 년 7 월) 사용되는 브라우저 중 94.4 % 이상에서 작동 합니다.

많은 공간을 사용하면 브라우저가 올바르게 줄 바꿈합니다. 정확한 수의 공백을 사용하는 것에 대해 걱정하지 말고 그냥 많이 넣으십시오. 그러면 브라우저는 다음 줄의 첫 번째 공백이 아닌 문자로 올바르게 줄 바꿈해야합니다.

<textarea name="address" placeholder="1313 Mockingbird Ln         Saginaw, MI 45100"></textarea>

Webkit 브라우저에 여러 줄 자리 표시자를 추가 할 수있는 실제 해킹이 있습니다 .Chrome은 작동했지만 최신 버전에서는 제거했습니다.

먼저 평소와 같이 자리 표시 자의 첫 번째 줄을 html5에 추가합니다

<textarea id="text1" placeholder="Line 1" rows="10"></textarea>

그런 다음 나머지 줄을 CSS로 추가하십시오.

#text1::-webkit-input-placeholder::after {
    display:block;
    content:"Line 2\A Line 3";
}

한 곳에서 회선을 유지하려면 다음을 시도하십시오. 이것의 단점은 크롬, 사파리, 웹킷 등의 다른 브라우저입니다. 첫 줄도 표시하지 않습니다.

<textarea id="text2" placeholder="." rows="10"></textarea>​

그런 다음 나머지 줄을 CSS로 추가하십시오.

#text2::-webkit-input-placeholder{
    color:transparent;
}

#text2::-webkit-input-placeholder::before {
    color:#666;
    content:"Line 1\A Line 2\A Line 3\A";
}

데모 피들

Firefox에서 비슷한 데모를 얻을 수 있다면 매우 좋을 것입니다.

AngularJS를 사용하는 경우 중괄호를 사용하여 원하는 것을 배치 할 수 있습니다. 여기에 바이올린이 있습니다.

<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>

MDN에 따르면 ,

자리 표시 자 텍스트 내의 캐리지 리턴 또는 줄 바꿈은 힌트를 렌더링 할 때 줄 바꿈으로 처리되어야합니다.

즉, 새 줄로 바로 이동하면 올바르게 렌더링되어야합니다. 즉

<textarea placeholder="The car horn plays La Cucaracha.
You can choose your own color as long as it's black.
The GPS has the voice of Darth Vader.
"></textarea> 

다음과 같이 렌더링되어야합니다.

HTML5 스펙이 명시 장소 홀더 필드에 새로운 라인을 거부합니다. 웹킷 버전 / will / 자리 표시 자에 라인 피드 제시 할 때, 그러나 이것은 잘못된 동작이며 의존해서는 안 새로운 라인을 삽입합니다.

단락이 w3에 충분하지 않다고 생각합니다.)

반응 :

React를 사용하는 경우 다음과 같이 수행 할 수 있습니다.

placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}

textarea너비가 정적 인 경우 비 줄기 공간과 자동 텍스트 영역 줄 바꿈을 함께 사용할 수 있습니다. 모든 줄에 대해 공백을 nbsp로 바꾸고 두 개의 인접한 줄이 하나에 맞지 않도록하십시오. 실제로 line length > cols/2.

이것이 최선의 방법은 아니지만 유일한 브라우저 간 솔루션 일 수 있습니다.

<textarea class="textAreaMultiligne" 
          placeholder="Hello,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This&nbsp;is&nbsp;multiligne&nbsp;example Have&nbsp;Fun&nbsp;&nbsp;&nbsp;&nbsp;"
          rows="5" cols="35"></textarea>

CSS를 사용해 볼 수 있습니다. 저에게 효과적입니다. 여기에 속성 placeholder=" "이 필요합니다.

<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
    content: "1st line...\A2nd line...\A3rd line...";
}
</style>

PHP에서 함수 chr (13) :

echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>';

나는 그것이 html / css에서만 가능하다고 생각하지 않습니다. JavaScript 또는 다른 종류의 핵을 사용하여 텍스트를 다음 줄로 밀어 넣을 수있는 추가 공간이있을 수 있습니다.

부트 스트랩 + 컨텐츠 편집 가능 + 여러 줄 플레이스 홀더

데모 : https://jsfiddle.net/39mptojs/4/

@cyrbil 및 @daniel 답변을 기반으로

부트 스트랩, jQuery 및 https://github.com/gr2m/bootstrap-expandable-input 사용 을 사용하여 자리 표시자를 컨텐츠 편집 가능으로 설정 .

"placeholder replace"자바 스크립트를 사용하고 CSS에 "white-space : pre"를 추가하면 여러 줄 플레이스 홀더가 표시됩니다.

HTML :

<div class="form-group">
    <label for="exampleContenteditable">Example contenteditable</label>
    <div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control">
    </div>
</div>

자바 스크립트 :

$(document).ready(function() {
    $('div[contenteditable="true"]').each(function() {
        var s=$(this).attr('placeholder');
        if (s) {
            var s1=s.replace(/\\n/g, String.fromCharCode(10));
            $(this).attr('placeholder',s1);
        }
    });
});

CSS :

.form-control[contenteditable="true"] {
    border:1px solid rgb(238, 238, 238);
    padding:3px 3px 3px 3px;
    white-space: pre !important;
    height:auto !important;
    min-height:38px;
}
.form-control[contenteditable="true"]:focus {
    border-color:#66afe9;
}

원래 게시물의 워터 마크 솔루션이 효과적입니다. 고마워 누군가가 필요로하는 경우 여기에 각도 지시문이 있습니다.

(function () {
  'use strict';

  angular.module('app')
    .directive('placeholder', function () {
      return {
        restrict: 'A',
        link:     function (scope, element, attributes) {
          if (element.prop('nodeName') === 'TEXTAREA') {
            var placeholderText = attributes.placeholder.trim();

            if (placeholderText.length) {
              // support for both '\n' symbol and an actual newline in the placeholder element
              var placeholderLines = Array.prototype.concat
                .apply([], placeholderText.split('\n').map(line => line.split('\\n')))
                .map(line => line.trim());

              if (placeholderLines.length > 1) {
                element.watermark(placeholderLines.join('<br>\n'));
              }
            }
          }
        }
      };
    });
}());