Databases
StackOverflow2013
Postsdbo
POreturn focus to contenteditable after execCommand?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POreturn focus to contenteditable after execCommand?
    text
    copied!<p>I have the following code demonstrating contenteditable property and a button that will inject bold text into the paragraph with contenteditable area. My question is how to return focus to where i left off after clicking on bold, if you highlight some text, and click bold, it'll bold those text, but the focus will not be there anymore. Same thing happens if you don't select anything and click bold, the focus will be gone and if you click where you left off again, you can type bold texts.</p> <p>Thank you very much for your help!</p> <pre><code>&lt;head&gt; &lt;style type="text/css"&gt; #container{ width:500; } .handle{ float:left; } &lt;/style&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(function(){ $('#bold').click(function (){ document.execCommand('bold', false, true); }); }); &lt;/script&gt; &lt;/head&gt; &lt;button id="bold"&gt;Bold&lt;/button&gt; &lt;div id="container"&gt; &lt;div class="c"&gt;&lt;p contenteditable&gt;Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as &lt;/p&gt;&lt;/div&gt; &lt;div class="c"&gt;&lt;p contenteditable&gt;Some text here asdf asdf asdf asdf asdf asd fasd fsa dfsa df asdf sadf sa dfa sdf sadf asd fsa df sadf asdf asdf asd fas df asdf as &lt;/p&gt;&lt;/div&gt; &lt;/div&gt; </code></pre>
 

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