Edit-cursor nicht angezeigt in Chrome in contenteditable
Wenn Sie diese Seite öffnen (siehe Live-demo) mit Chrome :
<span id="myspan" contenteditable=true></span>
CSS :
#myspan { border: 0; outline: 0;}
JS :
$(myspan).focus();
den contenteditable
span
Fokus hat (Sie kann anfangen zu schreiben, Dinge, und Sie werden sehen, dass es bereits den Fokus hatte), aber wir sehen nicht die "I
" cursor Bearbeiten.
Wie zu machen, dass dieser cursor wird angezeigt ? (Bemerkung : outline:0
erforderlich ist, sowie die Tatsache, dass die Spanne ist leer, auch keine Leerzeichen).
Hinweis : Mit Firefox, der cursor wird angezeigt.
versuchen Sie, eine min-width und min-height. eine leere Spanne hat eine gerenderte Breite und Höhe null, also kann es nicht wirklich sein moused über. durch und zwingt es auf eine Größe von wenigen Pixeln, gibt es etwas auf die Maus über.
Vielleicht ist dies die Antwort aus einer anderen Frage, die Euch helfen können: [stackoverflow.com/a/6249440/3298029][1] [1]: stackoverflow.com/a/6249440/3298029
siehe hier: jsfiddle.net/gs3p1a6r/4 oder jsfiddle.net/gs3p1a6r/4/embedded/result, produziert immer noch der Fehler. Es ist fokussiert, aber der cursor nicht angezeigt
ich sehe, ich dachte du meintest den Maus-cursor, aber meinst du das blinkende Ding. sieht aus wie Doktus gelöst.
Vielleicht ist dies die Antwort aus einer anderen Frage, die Euch helfen können: [stackoverflow.com/a/6249440/3298029][1] [1]: stackoverflow.com/a/6249440/3298029
siehe hier: jsfiddle.net/gs3p1a6r/4 oder jsfiddle.net/gs3p1a6r/4/embedded/result, produziert immer noch der Fehler. Es ist fokussiert, aber der cursor nicht angezeigt
ich sehe, ich dachte du meintest den Maus-cursor, aber meinst du das blinkende Ding. sieht aus wie Doktus gelöst.
InformationsquelleAutor Basj | 2014-09-17
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich zusätzlichen Polsterung an der linken und der cursor erscheint.
- Demo auf jsFiddle
Haha, das Versuch-und-Irrtum - ich Frage mich, warum es das tut, obwohl
Vielleicht, weil die leeren span hat eine Breite von
0
. Wenn der cursor muss erscheinen, inside das element, dann gibt es einfach keinen Platz für ihn, so zu tun, es sei denn, Sie geben es irgendeine Art von Polsterung. Das ist nur eine Vermutung zumindestIch hatte ein anderes Spiel und das hinzufügen von
display: block
und entfernen Sie die anderen Ergänzungen funktioniert auch: jsfiddle.net/gs3p1a6r/10 Es scheint, dass inline-Elemente ohne Inhalt sind nicht betroffenmin-width
?Hoppla, wollte nicht sehen, imtheman Antwort
InformationsquelleAutor Luke
Ja, natürlich! JSFIDDLE
Hatte, dies zu nutzen UND display: block plus machen beide Attribute !wichtig, weil der andere widersprüchliche css auf meiner Seite
InformationsquelleAutor Aleksey Dubinskiy
Die Lösung war die änderung
<span>
zu<div>
(ich habe gesehen, dass das löst vielecontenteditable
Probleme in anderen Fragen, die hier und da) + zum hinzufügen einermin-width
.In der Tat, mit dem folgenden code wird die Größe der
<div>
wäre0px x 18px
! Das erklärt, warum die caret (edit-cursor) versteckt sein würde !HTML
CSS
JS
Dann hinzufügen
in der CSS - wird es erlauben, die caret angezeigt werden, auch mit Chrome : http://jsfiddle.net/38e9mkf4/2/
InformationsquelleAutor Basj
Für mich die Einstellung von Inhalten des contenteditable div -
<br>
funktioniert. Ich habe versucht, es zunbsp;
aber das schafft zusätzliche Leerzeichen im div, bevor ich mit der Bearbeitung beginnen. Also, ich wähle diesen:über:
Hoffe, das hilft.
InformationsquelleAutor jsbisht
Fügen Sie einen CSS-Stil
möglicherweise müssen Sie auch
Ihrem
contenteditable="true"
tagInformationsquelleAutor Serj Sagan
Ich benutze Chrome und der Code funktioniert einwandfrei.
Versuchen
cursor: text;
in Ihrem CSS. Sehen hierEr will, um zu sehen, der Cursor erscheint. Er anfügen können, ist es für den Körper, wenn er ' s eingeben, und hören, um Klicks zu erkennen, wenn er klickt auf einen anderen Teil der Seite, und entfernen Sie es wieder aus dem Körper.
InformationsquelleAutor PreFiXAUT