7 
<div style="float:left;width:100px;height:100px;border:1px solid black;" onclick="this.innerHTML = 'TEST';"></div>

このボックスをクリックすると、Firefox がテキストを選択します。div が空でない場合、テキストは選択されません。何故ですか？

デモ

4

3 に答える 3

4

理由はわかりませんが、簡単な解決策があります。&nbsp;divにaを入れます。コードは次のようになります。

<div style="float:left;width:100px;height:100px;border:1px solid black;" onclick="this.innerHTML = 'TEST';">&nbsp;</div>

デモ

于 2012-08-24T07:15:09.470 に答える
2

それはオンクリックかもしれません。タイムアウトを試すことができます (免責事項: インライン コードは推奨されません)。

<div id="testDiv" style="float:left;width:100px;height:100px;border:1px solid black;" 
onclick="setTimeout(
  function() { 
    document.getElementById('testDiv').innerHTML = 'TEST';
  }
 ,10)"></div>

更新:しかし、onclickではありません-クリックはFxによってキャッシュされ、タイムアウト後も実行されているようです-それが機能しなかったことを示すために答えを残します:)

デモ

于 2012-08-24T07:16:06.030 に答える
1

おそらく、ブラウザー内での選択処理の仕組みにかかっている可能性があります。「クリック」したときにその場所に折りたたまれた選択が作成されると想像すると(すべての選択には開始点と終了点があります)、この折りたたまれた選択はおそらく div の開始と終了をラップします (DOM の観点から)。次に、コードは div 内に直接いくつかのコンテンツを挿入します。これにより、選択の終了点が新しいテキストの後にプッシュされます...ブラウザーが再描画されると、テキストの選択が魔法のように表示されます。おそらくを追加すると、 &nbsp;FireFox には折りたたまれた選択を配置する別の場所があるため、div がラップされません。

独自のブラウザー ベースの WYSIWYG エディターを作成したことがある場合は、選択プロセス全体のコーディングがいかに複雑であるかがわかるでしょう。

.blur() メソッド、または FireFox の実際の選択メソッドのいくつかを使用して、おそらく同じ問題を回避できます...ただし、この&nbsp;メソッドはシンプルでエレガントです。

ところで発見する非常に奇妙なバグ;）

于 2012-08-24T07:57:44.890 に答える