-4

我正在尝试使用占位符制作可编辑的 div。但我希望在此 div 中没有文本时自动设置占位符。

实际上我contentEditable='true';在 div 上使用这个元素。我用 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);
}});

`

4

4 回答 4

10

您可以尝试使用带有伪 :empty和:before数据属性的 CSS。 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>

它应该在一些浏览器中工作

于 2013-07-19T20:26:06.920 回答
1

You can do this:

<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);
    }
});
于 2013-07-19T19:28:20.853 回答
0

你的问题很模糊，但我会尽力给你一些有用的解决方案：

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/

于 2013-07-19T19:23:37.867 回答
-3

问题的措辞不是很清楚，但听起来你想制作一个文本区域。

于 2013-07-19T19:19:26.490 回答