Databases
StackOverflow2013
Postsdbo
POGetting `selectionStart` from a span's innerHTML
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGetting `selectionStart` from a span's innerHTML
    text
    copied!<p>I have a roll your own text editor that lets you change portions of a <code>textarea</code> element. i want to adapt it to work with a span element. I have no particular attachment to span. The goal is simply to let someone edit html rather than a textarea. I have it working fine in IE but am encountering some problems with Mozilla.</p> <p>Since I'm using a span instead of form input I am using <code>innerHTML</code> instead of value. However, I can't seem to get the <code>selectionStart</code> and <code>selectionEnd</code> functions to work on <code>innerHTML</code> as opposed to <code>value</code>.</p> <p>Here is the <code>textarea</code> code that works fine.... </p> <p>html</p> <pre><code>&lt;textarea id="textarea&gt;Some text goes here&lt;/textarea&gt;&lt;a href="javascript:void() onclick="editText"&gt;edit&lt;/a&gt; </code></pre> <p>JS</p> <pre><code>function editText() { var len = displaytext.value.length; var start = displaytext.selectionStart; var end = displaytext.selectionEnd; var sel = displaytext.value.substring(start, end); returns selection ok alert(sel); } </code></pre> <p>However, the following adaption is not limiting the selection to start and end.</p> <p>html</p> <pre><code>&lt;span id="textarea&gt;Some text goes here&lt;/span&gt;&lt;a href="javascript:void() onclick="editText"&gt;edit&lt;/a&gt; </code></pre> <p>JS</p> <pre><code>function editText() { var len = displaytext.innerHTML.length; //works ok var start = displaytext.selectionStart; //does not seem to work var end = displaytext.selectionEnd; //does not seem to work var sel = displaytext.innerHTML.substring(start, end); //returns whole innerHTML not selection alert(sel); } </code></pre> <p>Is there a problem with <code>selecionStart</code> on <code>innerHTML</code>? Workaround? Syntax error? Thanks for any suggesions. </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