4

我有一个普通的文本框和一个带有文本输入的灯箱。

我想将用户的选择保留在文本框中，即使用户专注于灯箱的文本输入。

  1. 在普通文本框中选择文本
  2. 切换灯箱
  3. 专注于灯箱输入

在步骤 3，用户的文本选择被丢弃。如何防止这种情况？例如，请参阅 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 的情况下持续存在。

我现在正在尝试 Nickolay 的建议。

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 回答