Der Bearbeitungscursor wird in Chrome in contenteditable nicht angezeigt

Wenn Sie diese Seite öffnen (s Live-Demo) mit Chrome:

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

CSS:

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

JS:

$(myspan).focus();

das contenteditable span hat Fokus (Sie können anfangen, Dinge zu schreiben und Sie werden sehen, dass es bereits Fokus hatte), aber wir sehen nicht das “I“Cursor bearbeiten.

Wie kann man dafür sorgen, dass dieser Cursor angezeigt wird? (Anmerkung : outline:0 benötigt wird, sowie die Tatsache, dass die Spanne auch ohne Leerzeichen leer ist).

Hinweis: Bei Firefox wird der Cursor angezeigt.

Das Problem ist, dass spans sind Inline-Elemente. Einfach hinzufügen display:block; zu Ihrem CSS und es wird das Problem beheben.

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

Ich habe links Polsterung hinzugefügt und der Cursor erscheint.

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

Demo in jsFiddle

.cont_edit {
  outline: 1px solid transparent;
}

Das hat eben mit der Art und Weise ein Leerzeichen zu tun ContentEditable Bereich gerendert wird. Um zu beweisen, dass es nicht um den Fokus geht, fügen Sie Ihrem bearbeitbaren div etwas Text hinzu und löschen Sie ihn dann. Wenn das letzte Zeichen weg ist, verschwindet der Cursor

Aus der Frage Festlegen der Caret-Position auf einen leeren Knoten innerhalb eines contentEditable-Elements

Das Auswahl-/Bereichsmodell basiert auf Indexen in den Textinhalt, wobei Elementgrenzen außer Acht gelassen werden. Ich glaube, dass es unmöglich sein kann, den Eingabefokus innerhalb eines Inline-Elements ohne Text zu setzen. Sicherlich kann ich bei Ihrem Beispiel den Fokus nicht auf das letzte Element setzen, indem ich auf oder die Pfeiltasten klicke.

Es funktioniert fast, wenn Sie jede Spanne auf einstellen display: block, obwohl es immer noch ein höchst seltsames Verhalten gibt, das von der Existenz von Leerzeichen im übergeordneten Element abhängt. Das Hacken der Anzeige, um mit Tricks wie Float, Inline-Block und Absolute Position inline auszusehen, führt dazu, dass IE jedes Element als separates Bearbeitungsfeld behandelt. Relativ positionierte Blockelemente nebeneinander funktionieren, aber das ist wahrscheinlich unpraktisch.

Sie können auch versuchen, ein Zeichen mit einer Breite von null hinzuzufügen, z ​

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

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

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

Die Lösung war, sich zu ändern <span> zu <div> (Ich habe gesehen, dass dies viele löst contenteditable Probleme in anderen Fragen hier und da) + a hinzuzufügen min-width.

Tatsächlich lässt sich mit folgendem Code die Größe der <div> wäre 0px x 18px ! Das erklärt, warum die Pflege (Bearbeitungscursor) würde ausgeblendet !

HTML

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

CSS

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

JS

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

Dann hinzufügen

min-width: 2px;

im CSS wird die zulassen Pflege Angezeigt werdenauch mit Chrome : http://jsfiddle.net/38e9mkf4/2/

Das Problem, mit dem ich bei Chrome v89.0.4389.90 konfrontiert war, war das contenteditable Felder zeigten manchmal das blinkende Caret an focusin und manchmal nicht. Mir ist aufgefallen, dass es vor dem Fokussieren immer blinkt, wenn bereits Inhalt im Feld ist. Wenn kein Inhalt vorhanden ist, tritt manchmal das Verhalten “wird/wird nicht” auf.

Zuerst dachte ich, es muss einen widersprüchlichen Event-Handler geben, der den Fokus unberechenbar wegnimmt. Ich habe alle meine Ereignisbindungen und Timer deaktiviert. Immer noch das gleiche unregelmäßige Verhalten. Dann dachte ich, es könnte ein widersprüchliches CSS sein, also habe ich alle Stylesheets deaktiviert. Zumindest war das Verhalten jetzt konsistent: Das Caret blinkt 100% der Zeit, wenn das Feld Inhalt hat; das Caretzeichen blinkt nicht 100 % der Zeit, wenn das Feld keinen Inhalt hat.

Binds und Stylesheets habe ich wieder aktiviert. Mein div war schon eingestellt display: block; mit min-width, min-heightund padding im endgültigen berechneten Stilsatz festgelegt. Keine der anderen Antworten hier hat funktioniert. Ich habe eine placeholder an :empty:before das war ein möglicher Übeltäter. Ich habe das auskommentiert. Jetzt war das Verhalten wieder konsistent, so als ob das Stylesheet ausgeschaltet wäre. Seltsamerweise funktioniert das ausführbare Snippet auf SO mit demselben berechneten CSS-Stack. Ich möchte die behalten placeholderalso erfordert es weitere Recherchen mit meiner aktuellen Codebasis …

Die einzige Lösung, mit der ich 100 % der Zeit mit meinem aktuellen Problem arbeiten konnte, bestand darin, das Einfügezeichen zwangsweise in leere Felder zu platzieren, indem ich ein Leerzeichen erstellte und es sofort danach entfernte. Das Beste, was ich für eine Problemumgehung tun kann, bis die Ursache behoben ist.

//force caret to blink inside masks
let force_caret = function() {
  if (!this.textContent) {
    this.textContent=" ";
    let r = document.createRange(),
      s = window.getSelection();
    r.setStart(this.childNodes[0], 0);
    r.collapse(true);
    s.removeAllRanges();
    s.addRange(r);
    this.textContent="";
  }
}

//binds
let els = document.querySelectorAll("[contenteditable]");
for (let i = 0; i < els.length; i++) {
  els[i].addEventListener('focusin', force_caret, false);
}

/* styles irrelevant to the issue, added for visual assist */

:root {
  --b-soft: 1px solid silver;
  --bs-in: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  --c-soft: gray;
  --lg-warm: linear-gradient(30deg, rgb(254, 250, 250), #eedddd);
}

body {
  font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
}

[contenteditable] {
  outline: initial;
}

[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);
  color: var(--c-soft);
  background-color: transparent;
  font-style: italic;
  opacity: .5;
  font-size: .9em;
}

.input {
  border-bottom: var(--b-soft);
  padding: .2em .5em;
}

.input_mask {
  display: flex;
  align-items: baseline;
  color: var(--c-soft);
}

.mask {
  box-shadow: var(--bs-in);
  border-radius: .2em;
  background: var(--lg-warm);
  font-weight: 500;
  border: 1px solid transparent;
  text-transform: uppercase;
  /* styles possibly relevant to the issue according to other proposed solutions */
  margin: 0 .4em .1em .4em;
  padding: .2em .4em;
  min-width: 3em;
  min-height: 1em;
  text-align: center;
}

<div data-type="tel" data-id="phone" class="input input_mask">
  <span>+1 (</span>
  <div maxlength="3" contenteditable="true" placeholder="111" class="mask"></div>
  <span>)</span>
  <div maxlength="3" contenteditable="true" placeholder="111" class="mask"></div>
  <span>-</span>
  <div maxlength="4" contenteditable="true" placeholder="1111" class="mask"></div>
  <span>x</span>
  <div maxlength="5" contenteditable="true" class="mask"></div>
</div>

Fügen Sie einen CSS-Stil hinzu

min-height: 15px;

brauchst du vielleicht auch

display: block;

zu deinem contenteditable="true" Schild