[英]Can you have multiline HTML5 placeholder text in a <textarea>?
当您使用 HTML5 的占位符属性关注它们时,我在文本字段中有幻影文本会消失:
<input type="text" name="email" placeholder="Enter email"/>
我想使用相同的机制在 textarea 中包含多行占位符文本,可能是这样的:
<textarea name="story" placeholder="Enter story\n next line\n more"></textarea>
但是那些\\n
出现在文本中并且不会导致换行......有没有办法拥有多行占位符?
更新:我让它工作的唯一方法是使用jQuery Watermark 插件,它接受占位符文本中的 HTML:
$('.textarea_class').watermark('Enter story<br/> * newline', {fallback: false});
对于<textarea>
s ,规范特别概述了占位符属性中的回车+换行符必须被浏览器呈现为换行符。
当元素的值是空字符串并且控件没有获得焦点时(例如,通过将它显示在一个空白的未聚焦控件中),用户代理应该向用户呈现这个提示。 提示中的所有 U+000D CARRIAGE RETURN U+000A LINE FEED 字符对 (CRLF),以及提示中的所有其他 U+000D CARRIAGE RETURN (CR) 和 U+000A LINE FEED (LF) 字符,都必须处理作为呈现提示时的换行符。
也反映在 MDN 上: https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-placeholder
FWIW,当我尝试使用 Chrome 63.0.3239.132 时,它确实像它所说的那样工作。
在大多数(参见下面的详细信息)浏览器中,在 javascript 中编辑占位符允许多行占位符。 如前所述,它不符合规范,你不应该期望它在未来工作(编辑:它确实工作)。
此示例替换所有多行 textarea 的占位符。
var textAreas = document.getElementsByTagName('textarea'); Array.prototype.forEach.call(textAreas, function(elem) { elem.placeholder = elem.placeholder.replace(/\\\\n/g, '\\n'); });
<textarea class="textAreaMultiline" placeholder="Hello, \\nThis is multiline example \\n\\nHave Fun" rows="5" cols="35"></textarea>
JsFiddle片段。
预期结果根据评论,似乎有些浏览器接受这种黑客攻击,而另一些则不接受。
这是我运行的测试结果(使用browsertshots和browserstack )
与这些统计数据相结合,这意味着它适用于目前(2015 年 10 月)使用的浏览器的大约88.7% 。
更新:今天,它适用于至少94.4%的当前(2018 年 7 月)使用的浏览器。
我发现如果您使用大量空格,浏览器会正确包装它。 不要担心使用确切数量的空格,只需在那里扔很多,浏览器应该正确换行到下一行的第一个非空格字符。
<textarea name="address" placeholder="1313 Mockingbird Ln Saginaw, MI 45100"></textarea>
实际上有一个 hack 可以在 Webkit 浏览器中添加多行占位符,Chrome 曾经可以工作,但在最近的版本中他们删除了它:
首先像往常一样将占位符的第一行添加到 html5
<textarea id="text1" placeholder="Line 1" rows="10"></textarea>
然后通过 css 添加该行的其余部分:
#text1::-webkit-input-placeholder::after {
display:block;
content:"Line 2\A Line 3";
}
如果您想将线路保留在一处,您可以尝试以下操作。 这样做的缺点是除了 chrome、safari、webkit 等其他浏览器。 甚至不显示第一行:
<textarea id="text2" placeholder="." rows="10"></textarea>
然后通过 css 添加该行的其余部分:
#text2::-webkit-input-placeholder{
color:transparent;
}
#text2::-webkit-input-placeholder::before {
color:#666;
content:"Line 1\A Line 2\A Line 3\A";
}
如果可以在 Firefox 上获得类似的演示,那就太好了。
根据 MDN ,
在呈现提示时,占位符文本中的回车符或换行符必须被视为换行符。
这意味着如果你只是跳到一个新行,它应该被正确渲染。 IE
<textarea placeholder="The car horn plays La Cucaracha.
You can choose your own color as long as it's black.
The GPS has the voice of Darth Vader.
"></textarea>
应该像这样呈现:
如果您使用的是 AngularJS,您可以简单地使用大括号来放置您想要的任何内容:这是一个小提琴。
<textarea rows="6" cols="45" placeholder="{{'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}}"></textarea>
反应:
如果您使用的是 React,则可以按如下方式进行:
placeholder={'Address Line1\nAddress Line2\nCity State, Zip\nCountry'}
这显然可以通过正常输入来完成,
<textarea name="" id="" placeholder="Hello awesome world. I will break line now Yup! Line break seems to work."></textarea>
html5 规范明确拒绝占位符字段中的新行。 当在占位符中显示换行符时,Webkit 的版本/will/插入新行,但这是不正确的行为,不应依赖。
我想段落对于 w3 来说不够简短;)
如果您的textarea
具有静态宽度,您可以使用不间断空格和自动 textarea 换行的组合。 只需将每一行的空格替换为 nbsp ,并确保两条相邻的线不能合二为一。 实际上line length > cols/2
。
这不是最好的方法,但可能是唯一的跨浏览器解决方案。
<textarea class="textAreaMultiligne" placeholder="Hello, This is multiligne example Have Fun " rows="5" cols="35"></textarea>
在带有函数 chr(13) 的 php 中:
echo '<textarea class="form-control" rows="5" style="width:100%;" name="responsable" placeholder="NOM prénom du responsable légal'.chr(13).'Adresse'.chr(13).'CP VILLE'.chr(13).'Téléphone'.chr(13).'Adresse de messagerie" id="responsable"></textarea>';
ASCII 字符代码 13 chr(13) 称为回车或 CR
您可以尝试使用 CSS,它对我有用。 这里需要属性placeholder=" "
。
<textarea id="myID" placeholder=" "></textarea>
<style>
#myID::-webkit-input-placeholder::before {
content: "1st line...\A2nd line...\A3rd line...";
}
</style>
使用Vue.js :
<textarea name="story" :placeholder="'Enter story\n next line\n more'"></textarea>
Bootstrap + contenteditable + 多行占位符
演示: https : //jsfiddle.net/39mptojs/4/
基于@cyrbil 和@daniel 的回答
使用 Bootstrap、jQuery 和https://github.com/gr2m/bootstrap-expandable-input在 contenteditable 中启用占位符。
使用“占位符替换”javascript 并将“空白:pre”添加到 css,显示多行占位符。
网址:
<div class="form-group">
<label for="exampleContenteditable">Example contenteditable</label>
<div id="exampleContenteditable" contenteditable="true" placeholder="test\nmultiple line\nhere\n\nTested on Windows in Chrome 41, Firefox 36, IE 11, Safari 5.1.7 ...\nCredits StackOveflow: .placeholder.replace() trick, white-space:pre" class="form-control">
</div>
</div>
Javascript:
$(document).ready(function() {
$('div[contenteditable="true"]').each(function() {
var s=$(this).attr('placeholder');
if (s) {
var s1=s.replace(/\\n/g, String.fromCharCode(10));
$(this).attr('placeholder',s1);
}
});
});
css:
.form-control[contenteditable="true"] {
border:1px solid rgb(238, 238, 238);
padding:3px 3px 3px 3px;
white-space: pre !important;
height:auto !important;
min-height:38px;
}
.form-control[contenteditable="true"]:focus {
border-color:#66afe9;
}
如果您使用的是像 Aurelia 这样的框架,它允许将视图模型属性绑定到 HTML5 元素属性,那么您可以执行以下操作:
<textarea placeholder.bind="placeholder"></textarea>
export class MyClass {
placeholder = 'This is a \r\n multiline placeholder.'
}
在这种情况下,当绑定到元素时,会考虑回车和换行。
我认为单独使用html / css是不可能的。 可能使用JavaScript或其他类型的黑客 - 额外的空格将文本推送到下一行,等等。
原始帖子中的水印解决方案效果很好。 谢谢你。 如果有人需要它,这里有一个角度指令。
(function () {
'use strict';
angular.module('app')
.directive('placeholder', function () {
return {
restrict: 'A',
link: function (scope, element, attributes) {
if (element.prop('nodeName') === 'TEXTAREA') {
var placeholderText = attributes.placeholder.trim();
if (placeholderText.length) {
// support for both '\n' symbol and an actual newline in the placeholder element
var placeholderLines = Array.prototype.concat
.apply([], placeholderText.split('\n').map(line => line.split('\\n')))
.map(line => line.trim());
if (placeholderLines.length > 1) {
element.watermark(placeholderLines.join('<br>\n'));
}
}
}
}
};
});
}());
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.