StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>So, you want to persist the selection when you focus out of the textarea and focus on the input tag. </p> <p>You need to remember the selection (start and end points when the text area loses focus) and force the selection so that it persists.</p> <p>To remember the selection, you can store the <code>el.selectionStart</code> and <code>el.selectionEnd</code> in two global variables inside a function which is called at <code>onblur()</code> event of textarea tag.</p> <p>Then inside your <code>pasteIntoInput()</code> you can consider those two points for replacement.</p> <p>To force selection - Check this solution <a href="https://stackoverflow.com/questions/1592637/keep-text-selection-when-focus-changes">for persisting</a> the selection. This uses jquery however, not plain javascript.</p> <p>However, I am not sure whether the solution actually works. I tried it here <a href="http://jsfiddle.net/sandeepan_nits/qpZdJ/1/" rel="nofollow noreferrer">http://jsfiddle.net/sandeepan_nits/qpZdJ/1/</a> but it does not work as expected.</p> <p><strong>Updates</strong></p> <p>I doubt if it is possible to persist selection after focus is gone. Probably selection needs focus to be there and the answer link that I gave tries to focus and then select. In that case this will not solve your problem. So, the alternatives could be - </p> <ul> <li><p>faking a text area with an html div. You can define some styles to create a selection like effect and apply it <code>onblur()</code> or use a simple readymade editor if available.</p></li> <li><p>Displaying the selection dynamically in a separate area. Check this <a href="http://laboratorium.0xab.cd/jquery/fieldselection/0.1.0/test.html" rel="nofollow noreferrer">demo of jquery fieldSelection plugin</a> . Remember that you are already storing the selection in global variables for the actual replacement. You only need to display to the user the selection which will be replaced. I think displaying the selection separately like this demo saves your time and it looks cool too.</p></li> </ul> <p>But depends on your requirement of course.</p> <p><strong>Further Update</strong> </p> <p>Check <a href="http://jsfiddle.net/sandeepan_nits/qpZdJ/2/" rel="nofollow noreferrer">http://jsfiddle.net/sandeepan_nits/qpZdJ/2/</a> for a working "Replacing text inside textarea without focus" (like you want) but without the selection on blur. I still don't know whether it is possible to keep the selection on blur.</p> <p><strong>Another Update (21st December)</strong></p> <p>Working solution for IEs as well as other browsers <a href="http://jsfiddle.net/sandeepan_nits/qpZdJ/24/" rel="nofollow noreferrer">http://jsfiddle.net/sandeepan_nits/qpZdJ/24/</a></p> <p>Here is the same code:-</p> <p>The html - </p> <pre><code><textarea id='text' cols="40" rows="20" onbeforedeactivate="storeSelectionIeCase();" onblur="storeSelectionOthersCase();"> </textarea> <div id="opt"> <input id="input" type="text" size="35"> <input type="button" onclick='pasteIntoInput(document.getElementById("input").value)' value="button"/> </div> </code></pre> <p>and all the js</p> <pre><code>var storedSelectionStart = null; var storedSelectionEnd = null; function pasteIntoInput(text) { el=document.getElementById("text"); el.focus(); if((storedSelectionStart != null) && (storedSelectionEnd != null)) { start = storedSelectionStart; end = storedSelectionEnd; } else { start = el.selectionStart; end = el.selectionEnd; } if (typeof start == "number"&& typeof end == "number") { var val = el.value; var selStart = start; var end = selStart + text.length; el.value = val.slice(0, selStart) + text + val.slice(end ); } else if (typeof document.selection != "undefined") { var textRange = document.selection.createRange(); textRange.text = text; textRange.collapse(false); textRange.select(); } } function storeSelectionOthersCase() { if(!(isBrowserIE6() || isBrowserIE7())) { storeSelection(); } else { return false; } } function storeSelectionIeCase() { if((isBrowserIE6() || isBrowserIE7())) { storeSelection(); } else { return false; } } function storeSelection() { //get selection el=document.getElementById("text"); var el = document.getElementById("text"); var sel = getInputSelection(el); //alert("check"+sel.start + ", " + sel.end); storedSelectionStart = sel.start; storedSelectionEnd = sel.end; //alert("see"+storedSelectionStart +" - "+storedSelectionEnd ); } function getInputSelection(el) { var start = 0, end = 0, normalizedValue, range, textInputRange, len, endRange; if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { start = el.selectionStart; end = el.selectionEnd; } else { range = document.selection.createRange(); if (range && range.parentElement() == el) { len = el.value.length; normalizedValue = el.value.replace(/\r\n/g, "\n"); // Create a working TextRange that lives only in the input textInputRange = el.createTextRange(); textInputRange.moveToBookmark(range.getBookmark()); // Check if the start and end of the selection are at the very end // of the input, since moveStart/moveEnd doesn't return what we want // in those cases endRange = el.createTextRange(); endRange.collapse(false); if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) { start = end = len; } else { start = -textInputRange.moveStart("character", -len); start += normalizedValue.slice(0, start).split("\n").length - 1; if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) { end = len; } else { end = -textInputRange.moveEnd("character", -len); end += normalizedValue.slice(0, end).split("\n").length - 1; } } } } return { start: start, end: end }; } function isBrowserIE6() { var ret = false; if(($.browser.msie) && (parseInt($.browser.version) == 6) && (!this.XMLHttpRequest)) { ret = true; } return ret; } function isBrowserIE7() { var ret = false; if(($.browser.msie) && ((parseInt($.browser.version) == 7) && (this.XMLHttpRequest))) { //Modification because of IE tester IE7 being detected as IE6 ret = true; } return ret; } </code></pre> <p>The previous fiddle was not working in IEs because by the time the <code>onblur()</code> event fires, the selection is destroyed in IE. I have applied some browser based conditions for IE 6 and 7, but not tested yet in IE 8.</p> <p>Thanks to <a href="https://stackoverflow.com/users/96100/tim-down">Tim Down</a> who helped me in identifying the problem with the previous fiddle.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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