我尝试了几种方法,但是都没有用。有谁知道解决这个问题的妙招?
<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/
您可以做的是将文本添加为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也不干净,但是可以解决问题。
我当然可以使用javascript伪造占位符效果,但是我希望有更简单的东西
不幸的是,@ amosrivera似乎没有标准的方法:developer.mozilla.org/en/HTML/HTML5/…,而不是脚本化的解决方法。
好的解决方案,但我会添加
if($(this).val() == 'This is...')
到focus
处理程序中,否则,如果您添加一些文本,然后失去焦点,然后再次单击文本区域,则文本将消失。@DenisGolomazov好的补充;我刚刚提交了带有焦点处理程序中的检查的编辑。我还建议以不同的方式添加占位符类和对占位符进行样式设置,如本更新所示的修改后的jsfiddle示例所示:jsfiddle.net/airandfingers/pdXRx/249
如果用户输入的内容与占位符文本的内容完全匹配,那该怎么办呢?