Firefox contenteditable-cursor-Problem

Hier ist ein Turnschuh, die Ihnen gefallen könnten: http://jsfiddle.net/e5gwc1gq/2/

Ich glaube, dass das problem ist, weil der :before Pseudo-element nicht erlauben, Zugriff auf die zugrunde liegenden parent-div.

Der Grund, warum ich so denken, denn wenn Sie zu ersetzen waren before mit after besteht das problem weiterhin, aber umgedreht wird, dh, wenn Sie jetzt auf der linken Seite, funktioniert es nicht richtig.

Hinweis: möchten Sie vielleicht word-wrap: break-word; css-Regel für .content-editable, da firefox nicht als Standard, sondern chrome.

Wir liefen in das gleiche Problem wie beschrieben in der ursprünglichen Frage. Wir haben eine Prozedur für "auf" und "keydown" für Firefox. Wenn das Feld leer ist und der Benutzer versucht, auf oder geben Sie in das Feld, wir verwischen ihn und konzentriere dich dann wieder drauf.

if ($("body").hasClass("ff"))
{
    var box = $(".content-editable");
    box.on("keydown click", function(e){
        if(box.text().trim().length == 0){
            box.blur().focus();
        }
    });
}

Das problem ist mit der :vor. Die Lösung ist, um zu simulieren, dass, bevor mit anderen div.

Hier ist meine Lösung zeige ich auch :bevor Sie Schwierigkeiten mit der position relative und absolute.

https://jsfiddle.net/oropesa/d8y1k7yd/

CSS:

/* halara style-reset */
* { margin: 0; padding: 0; } body { margin: 1rem; background: #dfeaff; } h4 { margin: 1rem 0 0} p { font-size: .8em; color: darkgray; margin: .5rem 0 1rem; }

/* default content style */
.content-editable {
    min-height: 1.5rem;
    max-height: 4rem;
    padding: 1.5rem;
    background: white;
    border: 1px solid #bdc3c7;
}
.content-editable:focus { border-color: #3498db; outline: 0 }

/* specific content style, troubles 1 & 2 */
.content-editable.placeholder-relative:empty:before { position: relative; }
.content-editable.placeholder-absolute:empty:before { position: absolute; }

.content-editable.placeholder-relative:empty:before,
.content-editable.placeholder-absolute:empty:before {
    content: attr(placeholder);
    color: #bdc3c7;
}

.content-editable.placeholder-relative:focus:empty:before,
.content-editable.placeholder-absolute:focus:empty:before {
   color: #3498db;
   opacity: .5
}

/* solution style */
.content-wrapper {
   position: relative;
   background: white;
 }
 
.content-editable.with-ghost {
   position: relative;
   background: transparent;
   z-index: 1;
}

.ghost-placeholder {
   position: absolute;
   display: none;
   z-index: 0;
   top: 1.5rem; /*as padding*/
   left: 1.5rem; /*as padding*/
   color: #bdc3c7;
}

.content-editable.with-ghost:empty + .ghost-placeholder {
   display: block;
}

HTML:

<h3>Only in firefox</h3>

<h4>Trouble 1: placeholder in before with position relative</h4>
<p>If you click several times inside the div (not on the placeholder-text), the cursor change between the left and right part of the div (and still focused). When the cursor is on the right, typing doesn't work.</p>
<div class="content-editable placeholder-relative" contenteditable="true" placeholder="Type something here..."></div>

<h4>Trouble 2: placeholder in before with position absolute</h4>
<p>When the div is focus and empty, the cursor ignores the padding of the div. And if you click on the text the focus event is ignored.</p>
<div class="content-editable placeholder-absolute" contenteditable="true" placeholder="Type something here..."></div>

<h4>Solution:</h4>
<p>Don't use <i>:before</i> and simulate the placeholder (see the <i>html</i> and <i>css</i> code).</p>
<div class="content-wrapper">
    <div class="content-editable with-ghost" contenteditable="true" placeholder="Type something here..."></div>
    <div class="ghost-placeholder">Type something here...</div>
</div>

<h4>Another trouble (more? damn firefox...)</h4>
<p>In all cases, when you write and remove all the text, the content-editable div isn't empty, inside it has <i>&lt;br&gt;&lt;br&gt;</i>, so if you want to show the placeholder you have to remove this rubbish with javascript (on the <i>blur</i> event).</p>

<p>Good luck! =)</p>

Habe ich mit einer Geige, das scheint zu funktionieren... das problem ist nur, der text muss manuell gelöscht.

Fiddle

HTML

<div class="content-editable" form-textarea font-face-frank
    placeholder="Type something here..." contenteditable="true"
    ng-model="form.message" ng-class="form.fontName" strip-br="true" required></div>

CSS

.content-editable {
    outline-width: 0;
    min-height: 1em;
    max-height: 300px;
    line-height: 1em;
    overflow-y: scroll;
    font-size: 44px;
    padding: 10px;
    border: 1px solid cyan;
}

JavaScript

document.getElementsByClassName('content-editable')[0].innerHTML=document.getElementsByClassName('content-editable')[0].getAttribute('placeholder');

wie scheint FF nicht richtig funktioniert mit ::before/after pseudo-Elemente.auch wenn ich absolute Positionierung der neue bug erschien - ein caret-Zeichen-set auf der Oberseite über den Platzhalter.

also meine Lösung war die Verwendung einer Zeitspanne (in meinem Fall - nach dem contenteditable div), aber Sie können auch legen Sie es im inneren.
css wird so etwas wie:

//imitate placeholder
[contentEditable="true"] + .chat-placeholder {
  color: rgba(63, 52, 52, 0.5);
  position: absolute;
  display: none;
}

//show placeholder if the field is empty only 
[contentEditable="true"]:empty + .chat-placeholder {
  display: inline-block;
}