5

contenteditabledivに問題があります。単純なコマンド(太字や斜体など)を実行したい場合は、次のようにします。

  • divを記憶します(太字のボタンをクリックするとフォーカスが失われるため)
  • ボタンをクリックすると、divに再度フォーカスを合わせて、太字のコマンドを実行します
  • すべてが機能します

今、私がもっと難しいことをしようとすると問題が発生します。たとえば、入力フィールドを含むカスタムダイアログを表示したいとします。

  • divを暗記する
  • ボタンをクリックすると、ダイアログが表示されます(すべて問題ありません)
  • ユーザーは入力フィールドをそのダイアログに集中させます(そしてそれがすべてが壊れます)

これに伴う問題は、入力要素がフォーカスされるとすぐに、contenteditable divがフォーカスを失うだけでなく、選択を失い、再度フォーカスするとすぐにカーソルが最初に移動することです。

だから私の質問は:別の入力要素に焦点を合わせた後、contenteditable divが選択を失うのを防ぐにはどうすればよいですか?

4

1 に答える 1

11

inputとcontenteditable要素が同じドキュメント内にある場合、contenteditable要素での選択が破棄されるのを防ぐことはできません。ただし、入力ボックスがフォーカスを受け取る前に選択を保存し、ダイアログが閉じられた後に選択を復元することができます。

簡単なサンプルコードを次に示します。

https://stackoverflow.com/a/3316483/96100

そして、ここにもっと完全な例があります:

https://stackoverflow.com/a/4690057/96100

input要素またはcontenteditable要素のいずれかを別のiframe内に配置すると、ほとんどのブラウザー(IEではありません)は元の選択を保持します。

于 2012-10-08T09:22:47.203 に答える