更新(2016年1月):这个好用的小技巧可能不再适用于所有浏览器,因此我有一个新的解决方案,在下面加了一点点JavaScript。
一个不错的小技巧
虽然不太好看,但是你可以直接在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/
- 根据文本区域的宽度,每行的缩进级别可能会有所不同。
- 在CSS中加入
resize: none;
非常重要,这样文本区域的大小就是固定的(请参见jsfiddle)。
或者,当你想要一个新行时,请按两次回车键(因此在“新行”之间有一个空行)。这个创建出来的“空行”需要有足够的制表符/空格来对应文本区域的宽度。如果你有太多了,似乎也没有关系,只需要足够即可。但这样做很不规范,可能不兼容浏览器。我希望有一种更简单的方法!
更好的解决方案
查看JSFiddle。
- 此解决方案将一个div放置在文本区域后面。
- 使用一些javascript来改变文本区域的背景颜色,适当地隐藏或显示占位符。
- 输入和占位符必须具有相同的字体大小,因此有两个mixin。
- 文本区域上的
box-sizing
和display: block
属性很重要,否则它后面的div将不是相同的大小。
- 设置
resize: vertical
和文本区域上的min-height
也很重要 - 注意占位符文本将换行,扩展文本区域将保持白色背景。然而,注释掉resize
属性会导致在水平扩展文本区域时出现问题。
- 只需确保文本区域上的最小高度足以覆盖其最小宽度下的整个占位符即可。**
![JSFiddle Screenshot](https://istack.dev59.com/2jTMm.webp)
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"?>
作为新行。 - rybo111
,例如<textarea placeholder="这是一行 这是另一行"></textarea>
。答案在下方。 - lu1s