Keep text selection when focus changes_问答_开发者

开发者 https://www.devze.com 2022-12-09 12:17 出处：网络

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.

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.

Select text in normal textbox
Toggle lightbox
Focus on lightbox input

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

Thanks :)

Update

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>

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.

I'm trying Nickolay's suggestion now.

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
});

Setting selection (from 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);

Getting selection: http://laboratorium.0xab.cd/jquery/fieldselection/0.1.0/test.html