Question

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

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

在普通文本框中选择文字
切换灯箱
专注于灯箱输入

在步骤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中的文字选择独立，专注于灯箱中的输入。因此，如果选择了一些文本'This is my iframe'，则切换灯箱并将光标放在输入中，iframe的文本选择将保持不带任何javascript。

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

Answer 1

来自How to preserve text selection when opening a jQuery dialog：您必须保留对模糊的选择并在焦点上恢复它：

$("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

焦点更改时保持文本选择

1 个答案: