javascript - tag - El cursor de edición no se muestra en Chrome en contenteditable

tag editable

Question

Al abrir esta página (ver demostración en vivo ) con Chrome:

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

CSS:

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

JS:

$(myspan).focus();

el span contenteditable tiene foco (puedes comenzar a escribir cosas y verás que ya tenía foco), pero no vemos el cursor de edición " I ".

¿Cómo hacer que se muestre este cursor? (Nota: outline:0 se necesita outline:0 , así como el hecho de que el espacio está vacío incluso sin espacio en blanco).

Nota: Con Firefox, se muestra el cursor.

Answer 1

Agrega un estilo CSS de

min-height: 15px;

También puede necesitar

display: block;

a su etiqueta contenteditable="true"

Answer 2

Agregué el relleno a la izquierda y aparece el cursor.

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

Demo en jsFiddle

Answer 3

El problema es que los span son elementos en línea. Solo agrega display:block; a su CSS y se solucionará el problema.

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

Answer 4

Esto solo tiene que ver con la forma en que se representa un área vacía de ContentEditable . Para demostrar que no se trata del enfoque, agregue un poco de texto a su div editable y luego elimínelo. Cuando el último carácter se haya ido, el cursor desaparecerá.

De la pregunta Configuración de la posición de intercalación en un nodo vacío dentro de un elemento contentEditable

El modelo de selección / rango se basa en los índices en el contenido del texto, sin tener en cuenta los límites de los elementos. Creo que puede ser imposible establecer el foco de entrada dentro de un elemento en línea sin texto en él. Ciertamente, con tu ejemplo no puedo enfocar dentro del último elemento haciendo clic en las teclas de flecha.

Casi funciona si configura cada intervalo para display: block , aunque todavía hay un comportamiento muy extraño, que depende de la existencia de espacios en blanco en el elemento primario. Al piratear la pantalla para verla en línea con trucos como el flotador, el bloque en línea y la posición absoluta, IE trata cada elemento como un cuadro de edición separado. Los elementos de bloque de posición relativa uno al lado del otro funcionan, pero probablemente no sea práctico.

También puede intentar agregar un carácter de ancho cero como ​

document.getElementById(''myspan'').focus();

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

<span id="myspan" contenteditable="true">&#8203;</span>

Answer 5

La solución fue cambiar <span> a <div> (he visto que esto resuelve muchos problemas contenteditable en otras preguntas aquí y allá) + para agregar un min-width .

De hecho, con el siguiente código, ¡el tamaño de <div> sería 0px x 18px ! ¡Eso explica por qué se oculta el cursor (cursor de edición)!

HTML

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

CSS

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

JS

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

Luego, añadiendo

min-width: 2px;

en el CSS permitirá que se muestre el símbolo , incluso con Chrome: http://jsfiddle.net/38e9mkf4/2/

Answer 6

Para mí configurarlo contenido de div contenteditable a <br> works. Intenté ponerlo a nbsp; pero eso crea espacio de caracteres extra en el div antes de comenzar a editar. Por lo tanto, elijo esto:

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

terminado:

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

Espero que esto ayude.

Answer 7

Yo uso Chrome y su código funciona bien.

Intenta usar el cursor: text; en tu CSS. Ver here

Answer 8

.cont_edit {
  outline: 1px solid transparent;
}