Firefoxの満足できるカーソルポジション/スタイル

StackOverflow https://stackoverflow.com/questions/1987435

質問

Firefox 3でContentedableを使用するのに問題があります。クリックした後、カーソルがDIVの上に表示されるか、部分的にしか表示されない場合（その時点でタイピングを開始するまで正しく動作します）。これが起こらないようにする方法についてのアイデアはありますか？

HTML：

<html>
  <head><title>Test Page</title></head>
  <body>
    <div id="editor" style="position:absolute; left:157px; top:230px; width:120px; height:30px">
      <div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true"> </div>
    </div>
  </body>
</html>

alt text

役に立ちましたか？

解決 6

Firefox 4以上でのみ編集可能なコンテンツを待って使用しました。これと、MozillaチームがFF 4のために修正した他のいくつかのバグを提出しました。

他のヒント

Firefox 37.0.2とまったく同じ問題を抱えています。コンテンツ誘導型の幅のスペースをゼロにする：擬似要素が問題を修正する前：

.contenteditable:empty:before {
  content: "\200B";
  display: inline;
}

この修正は、IE11を含むすべての最新のブラウザで機能します。IE11は、Firefoxの問題に非常によく似た世話の位置の問題もあります。

編集可能なdivの間に何らかのコンテンツまたはHTMLを配置する必要があります：

<div id="input" style="width:100%; height:100%; border:1px solid black; outline:none" contentEditable="true">Some sort of content or HTML here.</div>

私はこれをハッキングする方法を見つけようとして何時間も脳をガタガタと鳴らしていました。私が思いついたのは、デフォルトで隠されているDivに編集者を包むことでした。次に、少しインラインJavaScriptを使用してDivを表示します。これにより、カーソルが正しい位置にジャンプするように見えます。その汚いですが、それは機能します！

<div id="editor" style="display: none;">
     <% call RTE.renderTextArea(true) %>
</div>

<script>document.getElementById("editor").style.display="";</script>

また、FF 22の最新バージョンでこの問題に遭遇しました。私の場合、私の外Div（上記の「編集者」など）には高さがなく、カーソルの位置は満足できるdivの下にありました。外側のdivに高さを提供することにより、 height: 1.5em;, 、カーソルは正しく配置されました。

ブラインドDIVを作成してフォーカスを追加することで解決できます。ブラウザはコンテンツ魅力的な要素に焦点を合わせていませんが、ユーザーはそれをクリックすると、適切な場所にカーソルが表示されます。

$(document).ready(function(){
    $("#target_blind").focus();
});

<div id="target_blind" style="display:none;"></div>
<div id="target" contenteditable="true"></div>

1つの方法がありますが、問題は解決せず、Smartenだけです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top