是否在文本区域的占位符属性内插入换行符？
我已经尝试了几种方法，但都没有奏效。有没有人知道解决这个问题的妙招？
<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 -->更新:它不能在chrome中工作。这只是文本区域的宽度。
回答 22
Stack Overflow用户
发布于 2011-09-06 06:47:45
您可以将文本添加为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，也不是干净的，但确实有效。
Stack Overflow用户
发布于 2014-09-30 02:18:25
您可以在placeholder属性中插入一个新行html实体 ：
<textarea name="foo" placeholder="hello you Second line Third line"></textarea>
适用于:Chrome62、IE10、Firefox60
无法在Safari 11上运行
Stack Overflow用户
发布于 2012-11-05 19:18:56
更新(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)。
当你想要一个新行时，按两次Alternatively (这样你的“新行”之间就会有一个空行。创建的“空行”需要有足够的制表符/空格，以便与文本区域的宽度相等。如果你有太多，这似乎无关紧要，你只是需要足够的。这太脏了，而且可能不符合浏览器的要求。我希望有一个更简单的方法！
更好的解决方案
查看JSFiddle。
javascript用于更改文本区域的背景颜色，隐藏或显示占位符appropriately.
- The输入和占位符必须具有相同的字体大小，因此有两个混合。
- 文本区域上的
box-sizing和display: block属性很重要，或者它后面的div不是相同的javascriptresize: vertical和文本区域上的min-height也很重要-注意占位符文本如何换行和扩展文本区域将保持白色背景。但是，在展开文本区horizontally.
- Just时注释掉
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();
}Javascript：
$("textarea").on('change keyup paste', function() {
var length = $(this).val().length;
if (length > 0) {
$(this).addClass('data-edits');
} else {
$(this).removeClass('data-edits');
}
});https://stackoverflow.com/questions/7312623
复制相似问题