javascript - rich - wysiwyg html editor open source

Marcador de posición en contenteditable-tema de evento de enfoque

Question

He estado tratando de preguntar esto antes, sin tener la suerte de explicar / probar un ejemplo de trabajo donde ocurre el error. Así que aquí hay otro intento:

Intento replicar un efecto de marcador de posición en una DIV contenteditable. El concepto central es simple:

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

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

Esto puede funcionar en algunos casos, pero si el marcador de posición contiene HTML, o si se está realizando algún otro procesamiento, se borrará el cursor de texto del DIV editable, y el usuario debe volver a hacer clic en el DIV editable para poder comenzar a escribir (aunque sea todavía en foco):

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

No puedo utilizar un desencadenador de enfoque en el controlador, ya que creará un bucle de evento. Así que necesito una forma de restablecer el cursor de intercalación en el DIV editable o, de alguna otra manera, volver a enfocar.

Answer 1

Acabo de publicar un complemento para esto .

Utiliza una combinación de CSS3 y JavaScript para mostrar el marcador de posición sin agregar al contenido 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);

Y eso es.

Answer 2

Aquí está la solución que utilicé.

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

Desarrollé un complemento jQuery para esto. Eche un vistazo https://github.com/phitha/editableDiv

Answer 3

Aquí hay una solución de CSS única que aumenta algunas de las otras respuestas:

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

EDITAR: Aquí está mi fragmento en el codepen -> http://codepen.io/mrmoje/pen/lkLez

EDIT2: tenga en cuenta que este método no funciona al 100% para aplicaciones multilínea debido a que elementos residuales están presentes en el div después de realizar un select-all-cut o select-all-delete en todas las líneas. Créditos: - @vsync
El retroceso parece funcionar bien (al menos en webkit / blink)

Answer 4

Descubrí que la mejor manera de hacerlo es usar el atributo placeholder como de costumbre y agregar algunas líneas de CSS.

HTML

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

CSS

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

Nota: el selector CSS :empty solo funciona si literalmente no hay nada entre las etiquetas de apertura y cierre. Esto incluye nuevas líneas, pestañas, espacio vacío, etc.

Codepen

Answer 5

Es posible que deba actualizar manualmente la selección. En IE, el evento de enfoque es demasiado tarde, por lo que sugeriría utilizar el evento de activate lugar. Aquí hay un código que hace el trabajo en todos los principales navegadores, incluido IE <= 8 (que no es una alternativa de CSS):

Demostración en vivo: http://jsfiddle.net/hHLXr/12/

Código:

$(''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 6

Esta es mi manera:

Utiliza una combinación de jQuery y CSS3. Funciona exactamente como el atributo de marcador de posición html5! .

• Se esconde inmediatamente cuando ingresa la primera letra
• Se muestra de nuevo cuando eliminas lo que ingresas en él

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

Esta no es la solución exacta de su problema ...

en conjunto de opciones de notas de verano

airMode: cierto

marcador de posición funciona de esta manera.

Answer 8

Todo lo que necesitas es esta pequeña solución

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

Demostración: http://codepen.io/flesler/pen/AEIFc

Answer 9

solo use css pseudo-clases.

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

Answer 10

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