在textarea的占位符属性中插入换行符？
我已经尝试了一些方法，但都没有工作。 有谁知道一个漂亮的伎俩来解决这个问题？
<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 --> 更新：它不工作在铬。 这只是textarea的宽度。
请参阅： 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和不干净，但伎俩。
你可以插入一个新的行html实体 在placeholder属性中：
<textarea name="foo" placeholder="hello you Second line Third line"></textarea>
适用于：Chrome 62，IE10
不适用于：Firefox 57，Safari 11
不要以为你可以这样做： http : //www.w3.org/TR/html5/forms.html#the-placeholder-attribute
相关内容（重点介绍）：
占位符属性表示一个简短的提示（一个字或短语），旨在帮助用户在控件没有任何价值时input数据。 提示可以是样本值或预期格式的简要描述。 该属性（如果指定）必须具有不包含U + 000A LINE FEED（LF）或U + 000D CARRIAGE RETURN（CR）字符的值。
更新（2016年1月）：好的小黑客可能无法在所有的浏览器上工作，所以我有一个新的解决scheme，以下的一点点的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/
- 每行的缩进级别可能会根据文本区域的宽度而有所不同。
-
resize: none;非常重要resize: none;在CSS中，这样的textarea的大小是固定的（见jsfiddle）。
或者，当你想要一个新的行，点击返回两次（所以你的'新行'之间有一个空行，创build这个'空行'需要有足够的标签/空格，等于你的textarea的宽度。如果你有太多的东西，这似乎不重要，你只需要足够的东西，虽然很脏，但可能不符合浏览器，我希望有一个更简单的方法！
更好的解决scheme
看看JSFiddle 。
- 这个解决scheme在textarea后面放置一个div。
- 一些JavaScript用于更改textarea的背景颜色，适当地隐藏或显示占位符。
- input和占位符必须具有相同的字体大小，因此两个mixin。
- textarea上的
box-sizing和display: block属性很重要，或者它后面的div不会是相同的大小。 - 在textarea上设置
resize: vertical和min-height也很重要 – 注意占位符文本将如何换行，展开textarea将保留白色背景。 但是，注释resize属性会在横向扩展textarea时导致问题。 - 只要确保文本区域的最小高度足够覆盖整个占位符的最小宽度。
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'); } });
如何CSS解决scheme： http : //cssdeck.com/labs/07fwgrso
::-webkit-input-placeholder::before { content: "FIRST\000ASECOND\000ATHIRD"; } ::-moz-placeholder::before { content: "FIRST\000ASECOND\000ATHIRD"; } :-ms-input-placeholder::before { content: "FIRST\000ASECOND\000ATHIRD"; }
Salaamun Alekum
适用于Google Chrome
<textarea placeholder="Enter Choice#1 Enter Choice#2 Enter Choice#3"></textarea>
我testing了这在Windows 10.0（内部版本10240）和谷歌浏览器版本47.0.2526.80米
08:43:08 AST 6 Rabi Al-Awwal，1437 2015年12月17日，星期四
谢谢
你不能用纯HTML做，但是这个jQuery插件会让你： https ： //github.com/bradjasper/jQuery-Placeholder-Newlines
Jason Gennaro的答案略有改进（见代码注释）：
var placeholder = 'This is a line \nthis should be a new line'; $('textarea').attr('value', placeholder); $('textarea').focus(function(){ if($(this).val() == placeholder){ // reset the value only if it equals the initial one $(this).attr('value', ''); } }); $('textarea').blur(function(){ if($(this).val() == ''){ $(this).attr('value', placeholder); } }); // remove the focus, if it is on by default $('textarea').blur();
我喜欢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>
尝试这个：
<textarea placeholder="Line1
			Line2" cols="10" rows="5" style="resize:none"> </textarea>
使用 代替/n这将改变线路。
我修改了@Richard Bronosky的小提琴。
使用data-*属性而不是自定义属性是更好的方法。 我将<textarea placeholdernl>replace为<textarea data-placeholder>以及其他一些样式。
编辑
这里是理查德的原始答案 ，其中包含完整的代码片段。
很简单
var position = your break position; var breakLine = " ";//in html var output = [value.slice(0, position), breakLine, value.slice(position)].join(''); return output;
值代表原始string
使用自定义占位符检查此解决scheme。
- 您可以在所有浏览器（包括Firefox）中使用多行占位符
- 可以根据需要自定义占位符
在小提琴演示 。
$(document).on('input', '#textArea', function () { if ($('#textArea').val()) { $('#placeholderDiv').hide(); } else { $('#placeholderDiv').show(); } });
#textAreaWrap { position: relative; background-color: white; } #textArea { position: relative; z-index: 1; width: 350px; height: 100px; min-height: 100px; padding: 6px 12px; resize: vertical; background-color: transparent; /* When set background-color: transparent - Firefox displays unpleasant textarea border. Set border style to fix it.*/ border: 1px solid #a5a5a5; } #placeholderDiv { position: absolute; top: 0; padding: 6px 13px; color: #a5a5a5; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="textAreaWrap"> <textarea id="textArea"></textarea> <!-- Check here. If textarea has content - set for this div attribute style="display: none;" --> <div id="placeholderDiv">Multiline textarea<br> placeholder<br> <br> that works in Firefox</div> </div>
HTML
<textarea data-placeholder="1111\n2222"></textarea>
JS
$('textarea[data-placeholder]').each(function(){ var $this = $(this), placeholder = $this.data('placeholder'), placeholderSplit = placeholder.split('\\n'); placeholder = placeholderSplit.join('\n'); $this.focus(function(){ var $this = $(this); if($this.val() === placeholder){ $this.val(''); // $this.removeClass('placeholder'); } }).blur(function(){ var $this = $(this); if($this.val() == '') { $this.val(placeholder); // $this.addClass('placeholder'); } }).trigger('blur'); });
当你关注textarea时，我不喜欢隐藏占位符。 所以我做了一个构造函数Placeholder ，看起来就像内置的占位符，并且在Google Chrome浏览器中也可以使用。 这非常方便，因为您可以随意使用Placeholder函数，而且它甚至不需要jQuery。
编辑：
它现在还处理特殊情况，如正确插入占位符。
var textarea = document.getElementById("textarea"); new Placeholder(textarea, "Line 1\nLine 2\nLine 3"); function Placeholder(el, placeholder) { if (el.value == "" || el.value == placeholder) { el.style.color = "gray"; el.value = placeholder; el._plc = true; el.className += " unselectable"; } function keyPress(e) { window.setTimeout(function() { var replaced = reverseStr(el.value).replace(reverseStr(placeholder), ""); if (el.value == "") { el.value = placeholder; el.style.color = "gray"; cursorToStart(el); el._plc = true; el.className += " unselectable"; } else if (el._plc && el.value.endsWith(placeholder) && replaced !== "") { el.value = reverseStr(replaced); el.style.color = "black"; el._plc = false; el.readOnly = false; el.className = el.className.replace("unselectable", ""); } else if (el._plc && el.readOnly) { var ch = String.fromCharCode(e.charCode); if (e.keyCode == 13) ch = "\n"; // ENTER else if (e.charCode == 0) return; // non-character keys el.value = ch; el.style.color = "black"; el._plc = false; el.readOnly = false; el.className = el.className.replace("unselectable", ""); } }, 10); } el.addEventListener("keypress", keyPress, false); el.addEventListener("paste", keyPress, false); el.addEventListener("cut", keyPress, false); el.addEventListener("mousedown", function() { if (el._plc) el.readOnly = true; }, false); el.addEventListener("mouseup", function() { el.readOnly = false; if (el._plc) cursorToStart(el); }, false); function cursorToStart(input) { if (input.createTextRange) { var part = input.createTextRange(); part.move("character", 0); part.select(); } else if (input.setSelectionRange){ input.setSelectionRange(0, 0); } input.focus(); } function reverseStr(str) { if (!str) return ""; return str.split("").reverse().join(""); } }
textarea { border: 1px solid gray; padding: 3px 6px; font-family: Arial; font-size: 13px; transition: .2s; } textarea:hover, textarea:focus { border-color: #2277cc; } textarea:focus { box-shadow: inset 0 0 5px #85B7E9; } *.unselectable { -webkit-user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; }
<textarea id="textarea"></textarea>
老问题，我知道，但只是想我会发布一个简单的解决scheme，我想出了。 它肯定会让人觉得不舒服，而且只有当你有一个固定宽度的textarea，或者你不介意在延伸时看起来如何，但是你可以在占位符里面添加空格。 如果加上足够的话，它自然会破裂。
