Databases
StackOverflow2013
Postsdbo
POin Internet Explorer, pasteHTML causes unexpected behavior?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POin Internet Explorer, pasteHTML causes unexpected behavior?
    text
    copied!<p>I have the following HTML w/Javascript code (note: this only works in Internet Explorer):</p> <pre><code>&lt;script type='text/javascript'&gt; function changeIt() { var startTag = "&lt;span class='h' id='123abc'&gt;"; var endTag = "&lt;/span&gt;"; var htmlStr = document.selection.createRange().htmlText; document.selection.createRange().pasteHTML(startTag + htmlStr + endTag); } &lt;/script&gt; &lt;style type='text/css'&gt; .h { background: yellow; }&lt;/style&gt; &lt;p&gt;&lt;b&gt;Four&lt;/b&gt; score and seven years&lt;/p&gt; &lt;input type='button' value='change' onclick='javascript:changeIt();'&gt; </code></pre> <p>To use this function, simply highlight any part of the text you see in the screen, then click the "Change" button. Now, the strange behavior: </p> <p>If you highlight the word "Four" (with the bold tags) with anything else after the Four, it will make the entire highlight bold, which is not what I want. In other words, if you highlight with your mouse:</p> <p><b>Four</b> score and seven</p> <p>then click the "change" button, it will output: <b><b>Four</b> score and seven</b></p> <pre><code>&lt;b&gt;&lt;span class='h' id='123abc'&gt;&lt;b&gt;Four&lt;/b&gt; score and seven&lt;/span&gt;&lt;/b&gt; </code></pre> <p>I would like it to output this instead: <b>Four</b> score and seven</p> <pre><code>&lt;span class='h' id='123abc'&gt;&lt;b&gt;Four&lt;/b&gt; score and seven&lt;/span&gt; </code></pre> <p>What am I doing wrong? I'll take an answer in either Javascript or jQuery.</p> <p>Note: seems the background color isn't show properly on here, but my point is the whole selection turns bold when I don't want it to.</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