Placeholder in contenteditable - numéro d'événement de discussion

Question

J'ai essayé de demander à cet avant sans aucune chance d'expliquer/de prouver un exemple de travail où le bug se produit. Voici donc un autre essai:

Je suis en train de reproduire un espace réservé effet sur un contenteditable DIV. Le concept de base est simple:

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

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

Cela peut sometomes de travail, mais si l'espace réservé contient du HTML, ou si il y a d'autres traitements, la modifiable DIV du curseur de texte est en cours de suppression, et l'utilisateur doit cliquer sur l'modifiable DIV pour être en mesure de commencer à taper (même si il est encore dans le flou):

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

Je ne peux pas utiliser un accent de déclenchement dans le gestionnaire, car elle permettra de créer une boucle d'événements. J'ai donc besoin d'un moyen de re-régler le curseur curseur dans le modifiable DIV, ou de quelque autre façon re-concentrer.

Answer 1

Voici une CSS seule solution en l'augmentation de certains de l'autre répond:-

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

EDIT: Voici mon extrait sur codepen -> http://codepen.io/mrmoje/pen/lkLez

EDIT2: Être informé, cette méthode ne fonctionne pas à 100% pour le multi-applications en ligne en raison résiduelle <br> éléments présents dans la div après l'exécution d'un select-all-cut ou select-all-delete sur toutes les lignes. Crédits:- @vsync
Retour arrière semble bien fonctionner (au moins sur webkit/blink)

Answer 2

Je viens de publier un plugin pour cela .

Il utilise une combinaison de CSS3 et de JavaScript pour afficher l’espace réservé sans ajouter de contenu au contenu de 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);
 

Et c'est tout.

Answer 3

Vous devrez peut-être mettre à jour manuellement la sélection. Dans IE, l’événement de focus est trop tard, je vous suggère donc d’utiliser plutôt l’événement activate . Voici un code qui fait le travail dans tous les principaux navigateurs, y compris IE <= 8 (ce qui n’est pas une alternative CSS):

Démo en direct: http://jsfiddle.net/hHLXr/12/

Code:

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

utilisez simplement des pseudo-classes css.

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

Answer 5

J'ai trouvé que la meilleure façon de le faire est d'utiliser l' placeholder d'attribut comme d'habitude, et d'ajouter quelques lignes de CSS.

HTML

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

CSS

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

Remarque: le CSS :empty sélection ne fonctionne que si il n'y a littéralement rien entre l'ouverture et la balise de fermeture. Cela inclut de nouvelles lignes, les onglets, l'espace vide, etc.

Codepen