업데이트 (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-sizing및 display: block속성이 중요하거나 뒤에있는 div의 크기가 동일하지 않습니다.
- 텍스트 영역의 설정
resize: vertical및 a min-height도 중요합니다. 자리 표시 자 텍스트가 어떻게 줄 바꿈되는지 확인하고 텍스트 영역을 확장하면 흰색 배경이 유지됩니다. 그러나 resize속성을 주석 처리 하면 텍스트 영역을 가로로 확장 할 때 문제가 발생합니다.
- 텍스트 영역의 최소 높이가 전체 자리 표시자를 가장 작은 너비로 덮을 수있을만큼 충분한 지 확인하십시오. **
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');
}
});
<?="\n"?>, 새로운 줄로 입력 할 수 있습니다