Menu
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.
Thank you very much for your help!
<head>
<style type="text/css">
#container{
width:500;
}
.handle{
float:left;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#bold').click(function (){
document.execCommand('bold', false, true);
});
});
</script>
</head>
<button id="bold">Bold</button>
<div id="container">
<div class="c"><p contenteditable>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 </p></div>
<div class="c"><p contenteditable>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 </p></div>
</div>
975
When using contentEditable, calling execCommand () will affect the currently active editable element. Use of contenteditable across different browsers has been painful for a long time because of the differences in generated markup between browsers.
Document.execCommand() Jump to: When an HTML document has been switched to designMode, its document object exposes an execCommand method to run commands that manipulate the current editable region, such as form inputs or contentEditable elements.
A boolean value that is false if the command is unsupported or disabled. Note: document.execCommand () only returns true if it is invoked as part of a user interaction. You can't use it to verify browser support before calling a command.
Be aware that this feature may cease to work at any time. When an HTML document has been switched to designMode, its document object exposes an execCommand method to run commands that manipulate the current editable region, such as form inputs or contentEditable elements.
YOU SHOULD USE .contents()
var current;
$(function(){
$("p[contenteditable]").focus(function() {
current = this;
});
$('#bold').click(function (){
document.execCommand('bold', false, true);
$(current).contents().focus();
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
