web-dev-qa-db-fra.com

Le curseur d'édition ne s'affiche pas sur Chrome dans contenteditable

Lorsque vous ouvrez cette page (voir Démo en direct ) avec Chrome:

<span id="myspan" contenteditable=true></span>

CSS: 

#myspan { border: 0; outline: 0;}

JS:

$(myspan).focus();

la contenteditablespan a le focus (vous pouvez commencer à écrire des choses et vous verrez qu'elle en avait déjà le focus), mais nous ne voyons pas le curseur d'édition "I".

Comment faire pour que ce curseur soit affiché? (Remarque: outline:0 est nécessaire, ainsi que le fait que la plage est vide même sans espace blanc).

Remarque: avec Firefox, le curseur est affiché.

javascriptjquerycssgoogle-chromecontenteditable
19
Basj

La solution consistait à changer <span> en <div> (j'ai vu que cela résout de nombreux problèmes contenteditable dans d'autres questions ici et là) et d'ajouter un min-width.

En effet, avec le code suivant, la taille du <div> serait 0px x 18px! Cela explique pourquoi le caret _ (curseur d'édition) serait masqué!

HTML

<div id="blah" contenteditable=true></div>

CSS

#blah {
    outline: 0;
    position: absolute;
    top:10px;
    left:10px;
}

JS

$("#blah").focus();

Puis, en ajoutant 

min-width: 2px;

dans le CSS autorisera l'affichage du curseur, même avec Chrome: http://jsfiddle.net/38e9mkf4/2/

3
Basj

Le problème est que spans sont des éléments en ligne. Ajoutez simplement display:block; à votre CSS et cela résoudra le problème.

$(myspan).focus();
#myspan {
    border: 0;
    outline: 0;
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<span id="myspan" contenteditable=true></span>

15
imtheman

J'ai ajouté un rembourrage à gauche et le curseur apparaît.

#myspan
{
    border: 0; 
    outline: 0; 
    min-width: 100px; 
    height: 30px; 
    padding-left: 1px;
}

Démo dans jsFiddle

7
Luke
.cont_edit {
  outline: 1px solid transparent;
}
6
Aleksey Dubinskiy

Cela tient simplement à la manière dont une zone vide ContentEditable est rendue. Pour prouver que cela ne concerne pas le focus, ajoutez du texte à votre div éditable, puis supprimez-le. Lorsque le dernier caractère est parti, le curseur disparaîtra

À partir de la question Définition du caret sur un nœud vide dans un élément contentEditable

Le modèle de sélection/plage est basé sur des index dans le contenu texte, sans tenir compte des limites des éléments. Je pense qu'il est peut-être impossible de définir le focus d'entrée dans un élément en ligne sans texte. Certainement, avec votre exemple, je ne peux pas définir le focus dans le dernier élément en cliquant sur les touches fléchées.

Cela fonctionne presque si vous définissez chaque étendue sur display: block, bien que le comportement reste très étrange, en fonction de l'existence d'espaces dans le parent. Si vous modifiez l'affichage pour qu'il apparaisse en ligne avec des astuces telles que float, inline-block et position absolue, IE traite chaque élément comme une zone d'édition distincte. Les éléments de bloc positionnés les uns à côté des autres fonctionnent, mais c'est probablement peu pratique.

Vous pouvez également essayer d’ajouter un caractère de largeur nulle comme &#8203;

document.getElementById('myspan').focus();
#myspan {
    border: 0;
    outline: 0;
}
<span id="myspan" contenteditable="true">&#8203;</span>

2
KyleMit

Pour moi, régler le contenu de div contenteditable sur <br> fonctionne. J'ai essayé de le régler sur nbsp;, mais cela crée un espace de caractères supplémentaire dans la div avant de commencer l'édition. Donc, je choisis ceci:

<div id="blah" contenteditable=true><br></div>

plus de:

<div id="blah" contenteditable=true>nbsp;</div>

J'espère que cela t'aides.

1
jsbisht

Ajouter un style CSS de 

min-height: 15px;

vous pourriez aussi avoir besoin

display: block;

à votre tag contenteditable="true"

0
Serj Sagan