我正在尝试制作带有占位符的可编辑div。但我想当没有文本在这个div比自动占位符集。
事实上,我在div上使用contentEditable='true';
这个元素。我用jQuery处理占位符到这个函数。`
$('div').on('activate',
function() {
$(this).empty();
var range, sel;
if ( (sel = document.selection) && document.body.createTextRange){
range = document.body.createTextRange();
range.moveToElementText(this);
range.select();} });
$('div').focus(function() {
if (this.hasChildNodes() && document.createRange && window.getSelection) {
$(this).empty();
var range, sel;
range = document.createRange();
range.selectNodeContents(this);
sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}});
`
您可以尝试将CSS与伪:empty
和:before
以及数据属性一起使用。http://codepen.io/gcyrillus/pen/hzLIE
div:empty:before {
content:attr(data-placeholder);
color:gray
}
<div contenteditable="true" data-placeholder="You can insert & edit content here."></div>
它应该在几个浏览器中工作
您可以这样做:
<div contenteditable="true" id="editDiv">Placeholer</div>
jQuery
var placeholder = "Placeholder"; //Change this to your placeholder text
$("#editDiv").focus(function() {
if ($(this).text() == placeholder) {
$(this).text("");
}
}).focusout(function() {
if (!$(this).text().length) {
$(this).text(placeholder);
}
});
你的问题很模糊,但我会尽力给你一些有用的解决方案:
HTML:
<div id="editableDiv">
<textarea id="editText" placeholder="This is my placeholder"></textarea>
</div>
CSS:
#editableDiv {
width: 400px;
height: 200px;
}
#editText {
width: 100%;
height: 100%;
}
如果这不是你想要的,很抱歉,但这是我所能做的最好的信息量。
http://jsfiddle.net/LB7cp/
这个问题的措辞不是很清楚,但听起来你想做一个文本区域。