在文本区域的占位符属性内插入换行符?

我尝试了一些方法，但没有一个奏效。有人知道绕过这个的妙招吗?

<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。它只是textarea的宽度。

参见:http://jsfiddle.net/pdXRx/

当前回答

你可以插入一个新的行html实体
在占位符属性内部:

< textarea name = " foo " placeholder =“你好you& 10;第二个line& #第三线" > < / textarea > 10;

适用于: Chrome 62, IE10, Firefox 60

不起作用: Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/

2014-09-29 18:18:25

其他回答

萨拉蒙·阿莱库姆

&#10;

适用于谷歌Chrome浏览器

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>

我在Windows 10.0 (Build 10240)和谷歌Chrome版本上测试了这个 47.0.2526.80米 2015年12月17日星期四，1437，拉比奥瓦尔，AST 6 08:43:08

谢谢你！

2015-11-26 12:26:07

我不喜欢隐藏占位符当你聚焦文本区域。所以我做了一个构造函数占位符，看起来完全像内置占位符，也工作在其他浏览器比谷歌Chrome。它非常方便，因为你可以随时使用占位符函数，甚至不需要jQuery。

编辑:

它现在还能正确处理特殊情况，比如插入占位符。

2016-02-27 12:38:36

我喜欢Jason Gennaro和Denis Golomazov的作品，但我想要一些在全球范围内更有用的东西。我已经修改了这个概念，这样它就可以添加到任何页面而不受影响。

http://jsfiddle.net/pdXRx/297/

<h1>Demo: 5 different textarea placeholder behaviors from a single JS</h1>

<h2>Modified behaviors</h2>

<!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute -->

<textarea placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address' placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<h2>Standard behaviors</h2>

<textarea placeholder='Address'>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address'></textarea>

javascript非常简单

<script>
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>

2013-12-10 19:48:51

非常简单的

  var position = your break position;
    var breakLine = "&#13;&#10;";//in html 
    var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
    return output;

值表示原始字符串

2015-04-15 07:48:19

但需要注意的是，问题的前提与W3规范不一致，因此不能保证行为，解决方案使用&x10;工作时<textarea>是要在HTML中定义:

<textarea 
  placeholder="HTML entity works &#10; but unicode entity hard-coded \u000A !">
</textarea>

但是如果<textarea>是用JavaScript创建的，那么
实体将在输出中硬编码。然而，使用unicode等效的\u000A是可以的:

let myArea = document.createElement("textarea");
myArea.placeholder = "Unicode works \u000A But HTML entity hard-coded &#10; !";

2022-09-30 12:42:28

在文本区域的占位符属性内插入换行符?

推荐文章

最新文章

标签