title: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index
body: <p>I have this problem with Chrome and Safari (works in Mozilla and IE + Edge).
  I want to store the caret position and selection using <code>range=sel.getRangeAt(0);</code></p>
  
  <p>However, I get the following error in Chrome:
  <code>Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.</code></p>
  
  <p>How can I fix this in another way than the following: <a href="https://stackoverflow.com/questions/22935320/uncaught-indexsizeerror-failed-to-execute-getrangeat-on-selection-0-is-not">here</a>.</p>
  
  <p>This is my <strong><a href="https://jsfiddle.net/311ts2g1/1/" rel="nofollow noreferrer">fiddle</a></strong></p>
  
  <p>The reason why I can't use this method is because I display a <code>hidden</code> <code>div</code>, and insert text into an <code>&lt;input type="text"&gt;</code> field, I then insert that into a <code>contenteditable</code> <code>div</code>. Selecting this input field makes me save a new selection, and messes up the insert.</p>
  
  <p>Here are some images to display the problem:</p>
  
  <p><strong>Part 1: The <code>contenteditable</code> div fields</strong>
  <a href="https://i.stack.imgur.com/jfQdM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jfQdM.png" alt="Part 1, the table"></a>
  <strong>Part 2: The hidden div that is displayed, and typing, changing the carter position</strong>
  <a href="https://i.stack.imgur.com/faRpR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/faRpR.png" alt="Part 2, Typing in the URL that gets added."></a>
  <strong>Part 3: On insert, console error in Chrome and Safari</strong>
  <a href="https://i.stack.imgur.com/zsbXv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zsbXv.png" alt="Part 3, The Error Code"></a></p>
  
  <p>Any suggestions?</p>