Заполнитель в contenteditable - проблема с событием фокуса

Возможно, вам придется вручную обновить выбор. В IE событие focus слишком поздно, поэтому я бы предложил вместо этого использовать событие activate. Вот код, который выполняет эту работу во всех основных браузерах, включая IE ‹= 8 (чего нет в альтернативе только CSS):

Живая демонстрация: http://jsfiddle.net/hHLXr/12/

Код:

$('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 = document.createRange();
        range.selectNodeContents(this);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
});

Вот решение только для CSS, дополняющее некоторые другие ответы: -

<div contentEditable=true data-ph="My Placeholder String"></div>
<style>
    [contentEditable=true]:empty:not(:focus)::before{
        content:attr(data-ph)
    }
</style>

РЕДАКТИРОВАТЬ: вот мой фрагмент кода -> http://codepen.io/mrmoje/pen/lkLez

Я только что опубликовал для этого плагин.

Он использует комбинацию CSS3 и JavaScript для отображения заполнителя без добавления к содержимому div:

HTML:

<div contenteditable='true' data-placeholder='Enter some text'></div>

CSS:

div[data-placeholder]:not(:focus):not([data-div-placeholder-content]):before {
    content: attr(data-placeholder);
    float: left;
    margin-left: 5px;
    color: gray;
}

JS:

(function ($) {
    $('div[data-placeholder]').on('keydown keypress input', function() {
        if (this.textContent) {
            this.dataset.divPlaceholderContent = 'true';
        }
        else {
            delete(this.dataset.divPlaceholderContent);
        }
    });
})(jQuery);

Вот и все.

просто используйте псевдоклассы css.

span.spanclass:empty:before {content:"placeholder";}

Я обнаружил, что лучший способ сделать это - использовать атрибут placeholder, как обычно, и добавить несколько строк CSS.

HTML

<div contenteditable placeholder="I am a placeholder"></div>

CSS

[contenteditable][placeholder]:empty:before {
    content: attr(placeholder);
    color: #bababa;
}

Примечание. селектор CSS :empty работает только в том случае, если буквально нет ничего промежуточного между открывающим и закрывающим тегами. Сюда входят новые строки, вкладки, пустое пространство и т. Д.

Codepen

Все, что вам нужно, это небольшое решение

[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block; /* For Firefox */
}

Демо: http://codepen.io/flesler/pen/AEIFc

Вот мой способ:

Он использует комбинацию jQuery и CSS3. Работает точно так же, как атрибут заполнителя html5!.

• Скрывается сразу при вводе первой буквы
• Показывается снова, когда вы удаляете то, что в него вводите

HTML:

<div class="placeholder" contenteditable="true"></div>

CSS3:

.placeholder:after {
    content: "Your placeholder"; /* this is where you assign the place holder */
    position: absolute;
    top: 10px;
    color: #a9a9a9;
}

jQuery:

$('.placeholder').on('input', function(){
    if ($(this).text().length > 0) {
        $(this).removeClass('placeholder');
    } else {
        $(this).addClass('placeholder');
    }
});

ДЕМО: http://jsfiddle.net/Tomer123/D78X7/

Вот исправление, которое я использовал.

<div contenteditable><em>Edit me</em></div>
<script>
$('div').focus(function() {
    var target = $(this);
    window.setTimeout(function() { target.empty(); }, 10);
});
</script>

Для этого я разработал плагин jQuery. Взгляните на https://github.com/phitha/editableDiv

Это не точное решение вашей проблемы ..

в наборе вариантов летних заметок

airMode: true

заполнитель работает таким образом.

В .css

.holder:before {
    content: attr(placeholder);
    color: lightgray;
    display: block;
    position:absolute;    
    font-family: "Campton", sans-serif;
}

in js.

clickedOnInput:boolean = false;
charactorCount:number = 0;
let charCount = document.getElementsByClassName('edit-box')[0];

if(charCount){
this.charactorCount = charCount.innerText.length;
}

if(charactorCount > 0 && clickedOnInput){
document.getElementById("MyConteditableElement").classList.add('holder');
}

if(charactorCount == 0 && !clickedOnInput){
document.getElementById("MyConteditableElement").classList.remove('holder');
}

getContent(innerText){
  this.clickedOnInput = false;
}

В формате .html

<div placeholder="Write your message.." id="MyConteditableElement" onclick="clickedOnInput = true;" contenteditable class="form-control edit-box"></div>

это решение сработало для меня в угловом проекте