4

通常のテキストボックスと、テキスト入力付きのライトボックスがあります。

ユーザーがライトボックスのテキスト入力に焦点を合わせている場合でも、ユーザーの選択をテキストボックスに保持したいと思います。

  1. 通常のテキストボックスでテキストを選択します
  2. ライトボックスを切り替えます
  3. ライトボックス入力に焦点を当てる

手順3で、ユーザーのテキスト選択は破棄されます。どうすればこれを防ぐことができますか？たとえば、Googleドキュメントのリンク挿入ライトボックスを参照してください。

ありがとう ：）

アップデート

わかりました。Googleドキュメントでは、空白のページセクションにiframeを使用しています。これは、複数の選択を処理する方法です。このようなもの（嫌なHTMLを許してください）：

// test.html
<html><body>
  <h1 onclick='lightbox();'>This is the main section</h1>
  <iframe src='frame.html'></iframe>
  <div id='lightbox' style='display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.8; background-color: black;'>
    <input type='text' name='url' />
  </div>
  <script type='text/javascript'>
    function lightbox() {
      document.getElementById('lightbox').style.display = 'block';
    }
  </script>
</body></html>

// frame.html
<p>This is my iframe</p>

iframeでのテキストの選択は、ライトボックスの入力へのフォーカスとは無関係です。したがって、「これは私のiframeです」というテキストの一部が選択されている場合、ライトボックスが切り替えられ、カーソルが入力に置かれ、iframeのテキスト選択はjavascriptなしで保持されます。

私は今ニコライの提案を試みています。

4

1 に答える 1

6

jQueryダイアログを開くときにテキスト選択を保持する方法から：ぼかしで選択を保持し、フォーカスを元に戻す必要があります：

$("dialog").focus(function() {
  // save the selection
}).blur(function() {
  // set the text selection
});

設定の選択 ( jQuery Set Cursor Position in Text Areaから):

$.fn.selectRange = function(start, end) {
  return this.each(function() {
    if(this.setSelectionRange) {
      this.focus();
      this.setSelectionRange(start, end);
    } else if(this.createTextRange) {
      var range = this.createTextRange();
      range.collapse(true);
      range.moveEnd('character', end);
      range.moveStart('character', start);
      range.select();
    }
  });
};
$('#elem').selectRange(3,5);

選択の取得: http://laboratorium.0xab.cd/jquery/fieldselection/0.1.0/test.html

于 2009-10-20T07:00:49.113 に答える