焦点改变时保持文本选择

2022-01-13 00:00:00 selection textbox range focus javascript

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

I have a normal textbox, and a lightbox with a text input.

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

I want to keep the user's selection in the textbox, even when the user focuses on the lightbox's text input.

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

在第 3 步，用户的文本选择被丢弃.如何防止这种情况?例如，请参阅 Google 文档链接插入灯箱.

At step 3., the user's text selection is discarded. How can this be prevented? See Google docs link insertion lightbox for example.

谢谢:)

更新

好的，所以 Google 文档使用 iframe 作为空白页部分，这就是他们处理多项选择的方式.像这样的东西(请原谅令人作呕的 HTML):

Ok, so Google docs uses an iframe for the blank page section, which is how they are handling the multiple selections. Something like this (excuse the disgusting 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 的情况下持续存在.

Text selection in the iframe is independent of focus on the input in the lightbox. So if some of the text 'This is my iframe' is selected, then the lightbox is toggled and the cursor placed in the input, the iframe's text selection persists without any javascript.

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

I'm trying Nickolay's suggestion now.

推荐答案

来自 如何在打开 jQuery 对话框时保留文本选择:您必须在模糊时保留选择并将其恢复为焦点:

From How to preserve text selection when opening a jQuery dialog: you have to preserve selection on blur and restore it on focus:

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

设置选择(来自 jQuery 在文本区域中设置光标位置):

$.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

相关文章