Keep text selection when focus changes

javascript textbox focus range selection

12,336

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

12,336

Author by

Charles Enrick Cajan

Updated on June 21, 2022

Comments

Charles Enrick Cajan about 2 years
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. Select text in normal textbox
2. Toggle lightbox
3. 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.
Charles Enrick Cajan over 14 years

Ok, I'm finally getting into this, but am stuck with IE vs FF. The above is pure IE - anyone have any FF pointers?
Solomon Duskis over 14 years

What exactly doesn't work in Firefox? I don't see why the first snippet wouldn't, just tried the second and it works...
Charles Enrick Cajan over 14 years

My mistake - FF executes the if, MSIE the else.
Sandeepan Nath over 13 years

@Nickolay I am not sure if your solution works. Please check this jsfiddle.net/sandeepan_nits/qpZdJ/1 The selection inside the textarea does not persist when it loses focus.
Sandeepan Nath over 13 years

@Nickolay, may be I did not understand how it should work. Should this be able to persist selection even after focus is gone? Please check this stackoverflow.com/questions/4484755/…
Solomon Duskis over 13 years

@Sandeepan Nath: no, it's supposed to restore selection after the textarea that had the selection is re-focused. From the update to the original question here it seems that selection is per-document, so to persist selection even after focus is gone you have to use an iframe.
egyamado about 13 years

it seems easy for textarea, not pure text/html as i'm having here stackoverflow.com/questions/6037265/…