텍스트 영역의 자리 표시 자 속성 안에 줄 바꿈을 삽입 하시겠습니까?

나는 몇 가지 접근법을 시도했지만 아무도 효과가 없었다. 누구 든지이 문제를 해결하는 멋진 트릭을 알고 있습니까?

<textarea placeholder='This is a line \n this should be a new line'></textarea>

<textarea placeholder='This is a line
should this be a new line?'></textarea> <!-- this works in chrome apparently -->

업데이트 : 크롬에서는 작동하지 않습니다. 그냥 텍스트 영역 너비였습니다.

참조 : http://jsfiddle.net/pdXRx/



답변

당신이 할 수있는 일은 value줄 바꿈을 존중하는 텍스트를로 추가하는 것입니다 \n.

$('textarea').attr('value', 'This is a line \nthis should be a new line');

그런 다음 그것을 제거하고 focus다시 비울 수 있습니다 (비어있는 경우).blur . 이 같은

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }
});

예: http://jsfiddle.net/airandfingers/pdXRx/247/

순수한 CSS는 아니지만 깨끗 하지는 않지만 트릭을 수행합니다.


답변

&#10;자리 표시 자 속성 안에 새 줄 html 엔터티를 삽입 할 수 있습니다 .

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

작품 : Chrome 62, IE10, Firefox 60

작동하지 않습니다 : Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/


답변

그렇게 할 수 있다고 생각하지 마십시오. http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

관련 내용 (강조 광산) :

자리 표시 자 특성은 컨트롤에 값이 없을 때 사용자가 데이터를 입력 할 수 있도록 하는 짧은 힌트 (단어 또는 짧은 문구)를 나타냅니다 . 힌트는 샘플 값이거나 예상되는 형식에 대한 간단한 설명 일 수 있습니다. 지정된 경우 속성에 U + 000A LINE FEED (LF) 또는 U + 000D CARRIAGE RETURN (CR) 문자가 포함되지 않은 값이 있어야합니다.


답변

업데이트 (2016 년 1 월) : 멋진 작은 핵이 더 이상 모든 브라우저에서 작동하지 않을 수 있으므로 아래에 작은 자바 스크립트가있는 새로운 솔루션이 있습니다.


좋은 작은 해킹

기분이 좋지는 않지만 HTML에 새 줄을 넣을 수 있습니다. 이처럼 :

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
        1 Long St
        London
        Postcode
        UK"></textarea>

각 줄은 줄 바꿈이 아닌 새 줄에 있으며 각 ‘탭’들여 쓰기는 4 칸입니다. 그것은 좋은 방법은 아니지만 작동하는 것 같습니다.

http://jsfiddle.net/01taylop/HDfju/

  • 각 줄의 들여 쓰기 수준은 텍스트 영역의 너비에 따라 달라질 수 있습니다.
  • 하는 것이 중요합니다 resize: none;텍스트 영역의 크기가 (참조 jsfiddle)에 고정되도록 CSS에서.

또는
새 줄을 원할 때 return 키를 두 번 누르십시오 (따라서 ‘새 줄’사이에 빈 줄이 있습니다. 만들어진 ‘빈 줄’에는 텍스트 영역의 너비와 같은 충분한 탭 / 공간이 있어야합니다. 너무 많은 경우 문제가되지 않는 것만으로 충분합니다. 이것은 너무 더럽고 브라우저와 호환되지 않을 수 있습니다. 더 쉬운 방법이 있었으면 좋겠습니다!


더 나은 솔루션

JSFiddle을 확인하십시오 .

  • 이 솔루션은 텍스트 영역 뒤에 div를 배치합니다.
  • 일부 자바 스크립트는 텍스트 영역의 배경색을 변경하여 자리 표시자를 적절하게 숨기거나 표시하는 데 사용됩니다.
  • 입력과 자리 표시자는 동일한 글꼴 크기를 가져야하므로 두 믹스 인입니다.
  • 텍스트 영역 의 box-sizingdisplay: block속성이 중요하거나 뒤에있는 div의 크기가 동일하지 않습니다.
  • 텍스트 영역의 설정 resize: vertical및 a min-height도 중요합니다. 자리 표시 자 텍스트가 어떻게 줄 바꿈되는지 확인하고 텍스트 영역을 확장하면 흰색 배경이 유지됩니다. 그러나 resize속성을 주석 처리 하면 텍스트 영역을 가로로 확장 할 때 문제가 발생합니다.
  • 텍스트 영역의 최소 높이가 전체 자리 표시자를 가장 작은 너비로 덮을 수있을만큼 충분한 지 확인하십시오. **

JSFiddle 스크린 샷

HTML :

<form>
  <input type='text' placeholder='First Name' />
  <input type='text' placeholder='Last Name' />
  <div class='textarea-placeholder'>
    <textarea></textarea>
    <div>
      First Line
      <br /> Second Line
      <br /> Third Line
    </div>
  </div>
</form>

SCSS :

$input-padding: 4px;

@mixin input-font() {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
}

@mixin placeholder-style() {
  color: #999;
  @include input-font();
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  width: 250px;
}

input,textarea {
  display: block;
  width: 100%;
  padding: $input-padding;
  border: 1px solid #ccc;
}

input {
  margin-bottom: 10px;
  background-color: #fff;

  @include input-font();
}

textarea {
  min-height: 80px;
  resize: vertical;
  background-color: transparent;
  &.data-edits {
    background-color: #fff;
  }
}

.textarea-placeholder {
  position: relative;
  > div {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: $input-padding;
    background-color: #fff;
    @include placeholder-style();
  }
}

::-webkit-input-placeholder {
  @include placeholder-style();
}
:-moz-placeholder {
  @include placeholder-style();
}
::-moz-placeholder {
  @include placeholder-style();
}
:-ms-input-placeholder {
  @include placeholder-style();
}

자바 스크립트 :

$("textarea").on('change keyup paste', function() {
  var length = $(this).val().length;
  if (length > 0) {
    $(this).addClass('data-edits');
  } else {
    $(this).removeClass('data-edits');
  }
});


답변

CSS 솔루션은 어떻습니까 : http://cssdeck.com/labs/07fwgrso

::-webkit-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

::-moz-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

:-ms-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}


답변

살라 문 알레 쿰

&#10;

Chrome에서 작동

여기에 이미지 설명을 입력하십시오

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>

Windows 10.0 (빌드 10240) 및 Chrome 버전 47.0.2526.80 m에서 이것을 테스트했습니다.

08:43:08 AST 6 Rabi Al-Awwal, 1437 2015 년 12 월 17 일 목요일

감사합니다


답변

CSS 또는 자바 스크립트를 작성할 필요없이 줄 바꿈을 위해 & # 10 만 추가하십시오.

textarea{
    width:300px;
    height:100px;

}
<textarea placeholder='This is a line this &#10should be a new line'></textarea>

<textarea placeholder=' This is a line

should this be a new line?'></textarea>