Note that there are some explanatory texts on larger screens.

plurals
  1. POKeep text selection when focus changes
    primarykey
    data
    text
    <p>I have a normal textbox, and a lightbox with a text input.</p> <p>I want to keep the user's selection in the textbox, even when the user focuses on the lightbox's text input.</p> <ol> <li>Select text in normal textbox</li> <li>Toggle lightbox</li> <li>Focus on lightbox input</li> </ol> <p>At step 3., the user's text selection is discarded. How can this be prevented? See Google docs link insertion lightbox for example.</p> <p>Thanks :)</p> <p><strong>Update</strong></p> <p>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):</p> <pre><code>// test.html &lt;html&gt;&lt;body&gt; &lt;h1 onclick='lightbox();'&gt;This is the main section&lt;/h1&gt; &lt;iframe src='frame.html'&gt;&lt;/iframe&gt; &lt;div id='lightbox' style='display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.8; background-color: black;'&gt; &lt;input type='text' name='url' /&gt; &lt;/div&gt; &lt;script type='text/javascript'&gt; function lightbox() { document.getElementById('lightbox').style.display = 'block'; } &lt;/script&gt; &lt;/body&gt;&lt;/html&gt; // frame.html &lt;p&gt;This is my iframe&lt;/p&gt; </code></pre> <p>Text selection in the iframe is <em>independent</em> 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.</p> <p>I'm trying Nickolay's suggestion now.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload