CẬP NHẬT (Tháng 1 năm 2016): Bản hack nhỏ xinh có thể không hoạt động trên tất cả các trình duyệt nữa vì vậy tôi có một giải pháp mới với một chút javascript bên dưới.
Một chút hack đẹp
Nó không cảm thấy tốt, nhưng bạn chỉ có thể đặt các dòng mới trong html. Như thế này:
<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
1 Long St
London
Postcode
UK"></textarea>
Lưu ý mỗi dòng nằm trên một dòng mới (không được bọc) và mỗi lần thụt lề của tab là 4 khoảng trắng. Cấp nó không phải là một phương pháp rất hay, nhưng nó có vẻ hiệu quả:
http://jsfiddle.net/01taylop/HDfju/
- Có thể mức độ thụt lề của mỗi dòng sẽ thay đổi tùy thuộc vào độ rộng của vùng văn bản của bạn.
- Điều quan trọng là phải có
resize: none;trong css để kích thước của textarea được cố định (Xem jsfiddle).
Ngoài ra,
khi bạn muốn có một dòng mới, hãy nhấn return hai lần (Vì vậy, có một dòng trống giữa 'dòng mới' của bạn. 'Dòng trống' này cần phải có đủ các tab / khoảng trắng tương đương với chiều rộng của textarea của bạn. Sẽ không có vấn đề gì nếu bạn có quá nhiều, bạn chỉ cần đủ. Điều này thật bẩn thỉu và có lẽ không tuân thủ trình duyệt. Tôi ước có một cách dễ dàng hơn!
Một giải pháp tốt hơn
Kiểm tra JSFiddle .
- Giải pháp này đặt một div phía sau textarea.
- Một số javascript được sử dụng để thay đổi màu nền của textarea, ẩn hoặc tiết lộ trình giữ chỗ một cách thích hợp.
- Các đầu vào và giữ chỗ phải có cùng kích thước phông chữ, do đó hai mixin.
- Các thuộc tính
box-sizingvà display: blocktrên textarea rất quan trọng hoặc div đằng sau nó sẽ không cùng kích thước.
- Cài đặt
resize: verticalvà a min-heighttrên textarea cũng rất quan trọng - chú ý cách văn bản giữ chỗ sẽ bao bọc và mở rộng vùng văn bản sẽ giữ nền trắng. Tuy nhiên, bình luận ra resizetài sản sẽ gây ra vấn đề khi mở rộng văn bản theo chiều ngang.
- Chỉ cần đảm bảo chiều cao tối thiểu trên vùng văn bản là đủ để bao phủ toàn bộ chỗ dành sẵn của bạn ở chiều rộng nhỏ nhất của nó. **
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();
}
Javascript:
$("textarea").on('change keyup paste', function() {
var length = $(this).val().length;
if (length > 0) {
$(this).addClass('data-edits');
} else {
$(this).removeClass('data-edits');
}
});
<?="\n"?>dưới dạng một dòng mới