Created
July 13, 2011 19:28
-
-
Save shimondoodkin/1081133 to your computer and use it in GitHub Desktop.
WebKit contentEditable focus bug workaround
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <title>WebKit contentEditable focus bug workaround</title> | |
| <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script> | |
| <script type='text/javascript'> | |
| //<![CDATA[ | |
| $(function(){ | |
| // WebKit contentEditable focus bug workaround: | |
| if(/AppleWebKit\/([\d.]+)/.exec(navigator.userAgent)) { | |
| var editableFix = $('<input style="width:1px;height:1px;border:none;margin:0;padding:0;" tabIndex="-1">').appendTo('html'); | |
| $('[contenteditable]').blur(function () { | |
| editableFix[0].setSelectionRange(0, 0); | |
| editableFix.blur(); | |
| }); | |
| } | |
| }); | |
| //]]> | |
| </script> | |
| </head> | |
| <body> | |
| If you use contentEditable DIVs in your web application then this, is for you. <br> | |
| In WebKit based browsers there is a bug, of not passing focus to non contentEditable <br> | |
| elements from contentEditable elements. When clicking outside the contentEditable element then when <br> | |
| you for example type it still types in the content editable element. <br> | |
| the blur on contentEditable elements is not happening correctly <br> | |
| so we developed a workaround for this. you can see it here <br> | |
| <br> | |
| <br> | |
| What steps will reproduce the problem? <br> | |
| 1. open this page: http://jsfiddle.net/jAhCa/ | |
| 2. use two elements: a contenteditable div and a checkbox <br> | |
| 3. click on the div <br> | |
| 4. click on the checkbox <br> | |
| 5. press "right", "left" key see the focus is still on contenteditable div <br> | |
| 6. related to issues: http://code.google.com/p/chromium/issues/detail?id=89026 | |
| <br> | |
| simple html to play around with: <br> | |
| <br> | |
| <div contenteditable="true">hel<input type="checkbox"/>lo</div> | |
| <div contenteditable="true">hello2</div> | |
| <input type="checkbox"/> | |
| <input type="text"/> | |
| </body> | |
| </html> |
I confirm this trick works, I did:
.search-input-focus-fix {
display: none;
}
...
<div class=search-input contenteditable=true></div>
<input class=search-input-focus-fix tabIndex='1'>
...
// Focus an input (by setting a selection range)
document.querySelector('.search-input-focus-fix').setSelectionRange(0, 0);
// Focus the contenteditable element
document.querySelector('.search-input').focus();
It also works, if you create a temporary input:
// Focus an input (by setting a selection range)
document.createElement('input').setSelectionRange(0, 0);
// Focus the contenteditable element
document.querySelector('.search-input').focus();
Another solution to this is to trap the mouse down event (the first to fire of the Mouse type events from a mouse click), and preventDefault() on the event. Must be trapped on mouse down or the selection and range will be different if handled later. This should work in any version of Safari.
For example:
<span onclick="document.execCommand('bold', false);" onmousedown="event.preventDefault();">
<i class="material-icons">format_bold</i>
</span>
Another solution to this is to trap the mouse down event (the first to fire of the Mouse type events from a mouse click), and
preventDefault()on the event. Must be trapped on mouse down or the selection and range will be different if handled later. This should work in any version of Safari.For example:
<span onclick="document.execCommand('bold', false);" onmousedown="event.preventDefault();"> <i class="material-icons">format_bold</i> </span>
That's the best solution for avoid unfocus element on Webkit.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Fantastic! Saved me 5 days of headache!!!