Placeholder in contenteditable - focus Event issue

Tutaj jest tylko rozwiązanie CSS rozszerzające niektóre z innych odpowiedzi:-

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

EDIT: Oto mój fragment na codepen - > http://codepen.io/mrmoje/pen/lkLez

EDIT2: uwaga, ta metoda nie działa w 100% dla aplikacji wielowierszowych z powodu pozostałości <br> elementów obecnych w div po wykonaniu select-all-cut lub select-all-delete na wszystkich liniach. Kredyty: - @vsync
Backspace wydaje się działać dobrze (przynajmniej na webkit/blink)

Właśnie opublikowałem wtyczkę do tego .

Używa kombinacji CSS3 i JavaScript, aby pokazać symbol zastępczy bez dodawania do zawartości 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);

Po prostu użyj pseudo-klas css.

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

Odkryłem, że najlepszym sposobem na to jest użycie atrybutu placeholder Jak zwykle i dodanie kilku linii CSS.

HTML

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

CSS

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

Uwaga: selektor CSS :empty działa tylko wtedy, gdy pomiędzy znacznikiem otwarcia i zamknięcia nie ma dosłownie nic. Dotyczy to nowych linii, tabulatorów, pustych spacji itp.

Codepen

Wszystko czego potrzebujesz to małe rozwiązanie

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

Demo: http://codepen.io/flesler/pen/AEIFc

Here ' s my way:

Używa kombinacji jQuery i CSS3. działa dokładnie tak jak atrybut zastępczy html5!.

• ukrywa się od razu po wpisaniu pierwszej litery
• pojawia się ponownie, gdy usuniesz to, co do niego wpiszesz

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');
    }
});

DEMO: http://jsfiddle.net/Tomer123/D78X7/

Oto poprawka, której użyłem.

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

Opracowałem do tego wtyczkę jQuery. Spójrz https://github.com/phitha/editableDiv

var curText = 'Edit me';
$('div').focusin(function() {
    if ($(this).text().toLowerCase() == curText.toLowerCase() || !$(this).text().length) {
        $(this).empty();
    }
}).focusout(function() {
    if ($(this).text().toLowerCase() == curText.toLowerCase() || !$(this).text().length) {
        $(this).html('<em>' + curText + '</em>');
    }
});

To nie jest dokładne rozwiązanie twojego problemu ..

In summernote options set

airMode: true

Placeholder działa w ten sposób.