Keep text selected when focus input

Replacing selection with a <span> is probably the simplest way. You can also use an <iframe>, which is what google uses in Google Docs to maintain selection of text inside document while clicking UI elements.

With <span>, the solution might be like this (this solution build on your original code and the ideas of the other people here, especially @Bekim Bacaj).

!function(doc, win) { var input = doc.getElementById('special')	, editable = doc.getElementById('editable') , button = doc.getElementById('button') , fragment = null , range = null;	function saveSelection() { if (win.getSelection) { sel = win.getSelection(); if (sel.getRangeAt && sel.rangeCount) { return sel.getRangeAt(0); } } else if (doc.selection && doc.selection.createRange) { return doc.selection.createRange(); } return null; } /* Not needed, unless you want also restore selection function restoreSelection() { if (range) { if (win.getSelection) { sel = win.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (doc.selection && range.select) { range.select(); } } } */ function saveRangeEvent(event) { range = saveSelection(); if (range && !range.collapsed) {	fragment = range.cloneContents(); toggleButton(); } } function toggleButton() { button.disabled = !fragment || !input.value.match(/^https?:.*/); } toggleButton(); editable.addEventListener('mouseup', saveRangeEvent); editable.addEventListener('keyup', saveRangeEvent); button.addEventListener('click', function(event) { // insert link	var link = doc.createElement('a'); link.href = input.value; input.value = ''; range.surroundContents(link); toggleButton(); }); input.addEventListener('keyup', toggleButton); input.addEventListener('change', toggleButton); input.addEventListener('mousedown', function(event) { // create fake selection if (fragment) { var span = doc.createElement('span'); span.className = 'selected'; range.surroundContents(span); } }); input.addEventListener('blur', function(event) { // remove fake selection	if (fragment) { range.deleteContents(); range.insertNode(fragment); //restoreSelection(); } fragment = null; }, true); }(document, window) 

.selected { background-color: dodgerblue; color: white; }

<p id="editable" contenteditable="true"> Select something up here and click the input below <br>on firefox the input get the focus and the text still selected. <br>on chrome the text still selected but the input lose focus </p> <table> <tr> <td> <input type="text" id="special" style="border: solid blue 1px" placeholder="insert valid link incl. http://"> </td> <td> <button id="button">Add link</button> </td> </tr> </table>

Link to jsFiddle

As I can't comment on maioman (some reputation needed :)), here a little addition to his aswer:

The reason it doesn't work in firefox is that putting the focus on the input field removes the selection.

It all works fine if you put a mouseup event on the p instead of a focus event on the inputfield:

 p.addEventListener('mouseup', () => { highlight(select()); // save the selection }) 

I worked a little on this one... It was a really fun and instructive exercise.
I mainly started from Maioman's answer.

I made it so that selected text would end up in an anchor with the href provided in the input field... And the selected text remains selected while inputing the link. That is my understanding of your question.

See my working Fiddle : https://jsfiddle.net/Bes7weB/rLmfb043/
Tested to be working on FF 46, Chrome 50, Safari 5.1 and Explorer 11.

Notice that classList is only supported in IE10 and later.
Also, the links are not "clickable" because of the mouseup event.
But you can see the title attribute on mouseover.
I assume you'll save the paragraph's innerHTML to output it somewhere else.
;)


CSS:

a.highlighted { background: blue; color:white; } 

HTML:

<h1>Select some text below and click GO!</h1> <br> <p contenteditable="true" tabindex="0"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec risus turpis. Donec nisi urna, semper nec ex ac, mollis egestas risus. Donec congue metus massa, nec lacinia tortor ornare ac. Nulla porttitor feugiat lectus ut iaculis. In sagittis tortor et diam feugiat fermentum. Nunc justo ligula, feugiat dignissim consectetur non, tristique vitae enim. Curabitur et cursus velit. Etiam et aliquam urna. Duis pharetra fermentum lectus et fermentum. Phasellus eget nunc ultricies, ornare libero quis, porta justo. Sed euismod, arcu sed tempor venenatis, urna ipsum lacinia eros, ac iaculis leo risus ac est. In hac habitasse platea dictumst. Sed tincidunt rutrum elit, ornare posuere lorem tempor quis. Proin tincidunt, lorem ac luctus dictum, dui mi molestie neque, a sagittis purus leo a nunc. </p><br> <br> <b>Add a link to selected text:</b> <input type="text" id="hrefInput" style="border: solid blue 1px" value="http://www.test.com"> <input type="button" id="gobutton" value="GO!"><br> <span id="errorMsg" style="display:none;">No selected text!</span><br> <input type="button" id="undoButton" value="Undo"> 

JavaScript:

var p = document.querySelector('p'); var old = p.innerHTML; var HrefInput = document.getElementById("hrefInput"); var GoButton = document.getElementById("gobutton"); var UndoButton = document.getElementById("undoButton"); var errorMsg = document.getElementById("errorMsg"); var idCounter=0; var textSelected=false; UndoButton.addEventListener('focus', function() { console.log("Undo button clicked. Default text reloaded."); restore(); }) GoButton.addEventListener('click', function() { if(!textSelected){ errorMsg.style.display="inline"; errorMsg.style.color="rgb(166, 0, 0)"; errorMsg.style.fontWeight="bold"; return; } console.log("GO button clicked: Link id=a-"+idCounter+" created."); targetId="a-"+idCounter; document.getElementById(targetId).setAttribute("href",HrefInput.value); document.getElementById(targetId).classList.add("createdlink"); document.getElementById(targetId).setAttribute("title",HrefInput.value); document.getElementById(targetId).classList.remove("highlighted"); textSelected=false; idCounter++ }) p.addEventListener('focus', function() { errorMsg.style.display="none"; }); p.addEventListener('mouseup', function() { textSelected=true; console.log("Mouseup event in p : Text selected."); appendanchor(selectText()); // extract the selection HrefInput.focus(); // FireFox HrefInput.blur(); // Needs it. Try without, you'll see. }) function appendanchor(r) { // onmouseup if (!r) return; extracted = r.extractContents(); el = document.createElement('a'); el.setAttribute("id", "a-"+idCounter); el.setAttribute("class", "highlighted"); el.appendChild(extracted); r.insertNode(el) } function selectText() { // onmouseup if (window.getSelection) { console.log("window.getSelection"); sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { // Chrome, FF console.log(sel.getRangeAt(0)); return sel.getRangeAt(0); } else{console.log(sel);} } else if (document.selection && document.selection.createRange) { console.log("elseif"); return document.selection.createRange(); } return null; } function restore() { p.innerHTML = old; textSelected=false; } 

Substituting your selected region with a span element (and coloring that) could be a workaround:

var p = document.querySelector('p'); var old = p.innerHTML; var input = document.querySelector('input'); p.addEventListener('blur', () => { highlight(select()); // save the selection }) p.addEventListener('focus', () => { restore(); // restore the selection }) function highlight(r) { if (!r) return; var extracted = r.extractContents(); el = document.createElement('span'); el.appendChild(extracted); r.insertNode(el) } function select() { if (window.getSelection) { sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { return sel.getRangeAt(0); } } else if (document.selection && document.selection.createRange) { return document.selection.createRange(); } return null; } function restore() { p.innerHTML = old; }

span { background: tomato; color:white; }

<p contenteditable="true" tabindex="0"> Select something up here and click the input below <br> on firefox the input get the focus and the text still selected. <br> on chrome the text still selected but the input lose focus </p> <input type="text" id="special" style="border: solid blue 1px">

works on chrome, but not on FF

as suggested by Eric using mouseup event (I actually used blur) on p to call highlight(select()) will fix the issue on FF.

add the focus inside a timeout function, that should fix your issue.

setTimeout(function(){ document.getElementById("textToInsert").focus(); }, 1); 

jsfiddle: http://jsfiddle.net/mody5/L5hx9h3k/1/

Here is a very old snippet I've posted as an answer on some other list a long time ago. It might help you rethink your current strategy and completely avoid the need for hacking the naturally expected behavior of focus.

function createLink(e){ if(e.target){	var a = window.getSelection().getRangeAt(0);	var b = a.toString();	var z = document.createElement("span");	var l2 = prompt("Enter URL:", "http://");	b = b.link(l2);	z.innerHTML=b;	a.deleteContents();	a.insertNode(z) } else{ document.execCommand("CreateLink") } }

<!DOCTYPE html> <html> <head> <title>Text to Hyperlink</title> </head> <body> <h1>Create a link</h1> Select some text and click the button. On the presented toolbox provide the url and confirm. The selected text will become a hyperlink<br> My Homepage<br> My Favorite<br> My Search Page<br><br> <button onclick="createLink(event)">Make it a link</button> <script> </script> </body> </html>

I'll give you a hint and let you figure it out yourself. You will need to detect if chrome is being used. In your jsfiddle, add console.log(sel); after sel = window.getSelection();. Notice in the log that the selections are different on the different browsers. To be honest, I'm not sure why, but this may help you find out what the problem is.

Also notice the same issue if you comment out sel.removeAllRanges(); you will get an error telling you that they are different, as above.

In my use case, I was able to solve loosing the selection when using an input field with the help of a MutationObserver.

In my component I have got a state for the range which I initialize when it is connected:

private range: Range | undefined; componentWillLoad() { const selection: Selection | undefined = getSelection(); this.range = selection?.getRangeAt(0); } 

getSelection is a utility which returns the Selection according browser.

Then the function which applies the color looks like following:

private selectColor($event: CustomEvent) { const selection: Selection | undefined = getSelection(); if (!selection || !$event || !$event.detail) { return; } selection?.removeAllRanges(); selection?.addRange(this.range); const observer: MutationObserver = new MutationObserver( (_mutations: MutationRecord[]) => { observer.disconnect(); this.range = selection?.getRangeAt(0); }); const anchorNode: HTMLElement | undefined = getAnchorNode(selection); observer.observe(anchorNode, {childList: true}); document.execCommand('foreColor', false, $event.detail.value); 

What's happening: I get the selection, remove all ranges and add the one I preserve as state.

Then I attach a mutation observer on the selection anchor node. For such purpose I use a utility which return either the anchor node or its parent in case of a text or comment would be selected.

Then I call the execCommand.

Once the observer kicks, I query the selection (which is at that point the modified node of the document, not the input) for the new range and save it to my state.