在textarea的占位符属性内插入换行符?


178

我尝试了几种方法,但是都没有用。有谁知道解决这个问题的妙招?

<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中不起作用。只是文本区域的宽度。

请参阅: http //jsfiddle.net/pdXRx/


2
如果使用PHP,则可以<?="\n"?>换行
rybo111 2014年

39
只需添加&#10;占位符属性,例如即可<textarea placeholder="This is a line&#10;This is another one"></textarea>。答案在下面。
lu1s

4
@ lu1s在Chrome,IE中有效,但在Firefox和Safari中无效。
mb mb21

1
@ mb21我已经在一分钟前在Firefox 60.0.2中测试了它,现在它可以工作了。也许它现在可以在大多数浏览器中使用。
tsuma534

3
到了2020年,仍然没有Safari的解决方案?
安梅1

Answers:


60

您可以做的是将文本添加为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也不干净,但是可以解决问题。


4
我当然可以使用javascript伪造占位符效果,但是我希望有更简单的东西
amosrivera 2011年

2
不幸的是,@ amosrivera似乎没有标准的方法:developer.mozilla.org/en/HTML/HTML5/…,而不是脚本化的解决方法。
杰森·根纳罗

3
好的解决方案,但是我会添加if($(this).val() == 'This is...')focus处理程序中,否则,如果您添加一些文本,然后失去焦点,然后再次单击文本区域,则文本将消失。
丹尼斯·哥洛马佐夫

2
@DenisGolomazov好的补充;我刚刚提交了带有焦点处理程序中的检查的编辑。我还建议以不同的方式添加占位符类和设置占位符的样式,如本更新所示,这是我修改过的jsfiddle示例:jsfiddle.net/airandfingers/pdXRx/249
Aaron

如果用户输入的内容与占位符文本的内容完全匹配,那该怎么办呢?
阿朱那
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.