7

FireFox 3 で contentEditable の使用に問題があります。カーソルが div の上に表示されるか、div をクリックした後に部分的にしか表示されないという問題があります (正しく動作するように入力を開始するまで)。これが起こらないようにする方法についてのアイデアはありますか?

HTML:

<html>
  <head><title>テストページ</title></head>
  <本体>
    <div id="editor" style="position:absolute; left:157px; top:230px; width:120px; height:30px">
      <div id="input" style="width:100%; height:100%; border:1px 黒一色; Outline:none" contentEditable="true"> </div>
    </div>
  </body>
</html>

代替テキスト

4

6 に答える 6

2

編集可能にする 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>
于 2009-12-31T23:30:47.857 に答える
1

FF 22 の最新バージョンでもこの問題に遭遇しました。私の場合、外側の div (上記の「editor」など) には高さがなく、カーソル位置は contenteditable div の下にありました。外側の div に高さを指定することで、たとえばheight: 1.5em;、カーソルが正しく配置されました。

于 2013-07-16T14:10:37.983 に答える
1

これを回避する方法を見つけようとして、私は何時間も頭を悩ませていました。私が思いついたのは、デフォルトで非表示になっている div でエディターをラップすることでした。次に、少しインラインの JavaScript を使用して div を表示します。これにより、カーソルが正しい位置にジャンプするようです。汚れていますが、機能します。

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

<script>document.getElementById("editor").style.display="";</script>
于 2010-06-06T22:39:30.210 に答える
0

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

于 2010-08-03T05:57:52.203 に答える
0

これは、ブラインド div を作成してそれにフォーカスを追加することで解決できます。ブラウザは contenteditable 要素にフォーカスしていませんが、ユーザーはそれをクリックする必要があり、その場合はカーソルが適切な場所に表示されます。

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

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

方法は 1 つありますが、問題を解決するのではなく、賢くするだけです。

于 2011-11-16T02:16:31.947 に答える