Segnaposto in contenteditable - problema evento focus

Question

Ho cercato di chiedere questo prima, senza alcuna fortuna di spiegare/dimostrare un esempio funzionante in cui si verifica l'errore. Quindi, ecco un altro tentativo:

Sto tentando di replicare un effetto segnaposto su un DIV contenteditable. Il concetto di base è semplice:

<div contenteditable><em>Edit me</em></div> 

<script> 
$('div').focus(function() { 
    $(this).empty(); 
}); 
</script> 

Questo può sometomes lavoro, ma se il segnaposto contiene HTML, o se c'è qualche altra elaborazione in corso, cursore del testo della modificabile del DIV viene rimosso, e l'utente deve ri-click il DIV modificabile per essere in grado di iniziare a scrivere (anche se è ancora a fuoco):

Esempio: http://jsfiddle.net/hHLXr/6/

non posso utilizzare un trigger di messa a fuoco nel gestore, dal momento che creerà un ciclo di eventi. Quindi ho bisogno di un modo per reimpostare il cursore del cursore sul DIV modificabile o in altri modi per mettere a fuoco.

Answer 1

Potrebbe essere necessario aggiornare manualmente la selezione. In IE, l'evento di messa a fuoco è troppo tardi, quindi suggerirei di utilizzare l'evento activate. Ecco alcuni codice che fa il lavoro in tutti i principali browser, tra cui Internet Explorer < = 8 (che un'alternativa CSS-only non sarà):

demo dal vivo: http://jsfiddle.net/hHLXr/12/

Codice:

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

Answer 2

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

Answer 3

solo usa le pseudo-classi css.

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

Answer 4

Ho appena published a plugin for this.

Esso utilizza una combinazione di CSS3 e JavaScript per mostrare il segnaposto senza aggiungere al contenuto del 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); 

E questo è tutto.

Answer 5

Ecco un CSS unica soluzione aumentando alcune delle altre risposte: -

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

EDIT: Ecco il mio frammento su codepen ->http://codepen.io/mrmoje/pen/lkLez

EDIT2: Essere informati, questo metodo non funziona al 100% per applicazioni multilinea a causa degli elementi residui <br> presenti nel div dopo aver eseguito uno select-all-cut o select-all-delete su tutte le linee.Credits: - @vsync
Backspace sembra funzionare bene (almeno su WebKit/blink)

Answer 6

Qui è il mio modo:

Esso utilizza una combinazione di jQuery e CSS3. Funziona esattamente come l'attributo placeholder html5!.

• si nasconde subito quando si immette la prima lettera
• si mostra ancora una volta quando si elimina ciò che si immette in esso

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/

Answer 7

Ho trovato che il modo migliore per farlo è quello di utilizzare l'attributo placeholder come al solito e aggiungere alcune righe di CSS.

HTML

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

CSS

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

Nota: il selettore CSS :empty funziona solo se non c'è letteralmente nulla in-tra l'apertura e tag di chiusura. Questo include nuove linee, schede, spazio vuoto, ecc

Codepen

Answer 8

Ecco la correzione che ho usato.

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

Ho sviluppato un plug-in jQuery per questo. Date un'occhiata https://github.com/phitha/editableDiv

Answer 9

Tutto ciò che serve è questa piccola soluzione

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

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

Answer 10

Questo non è soluzione esatta del problema ..

nelle opzioni summernote set

airMode: vero

segnaposto funziona in questo modo.