Keyboard stops working in Safari iOS 6 when clearing contenteditable div

StackOverflow https://stackoverflow.com/questions/21222967

Question

I have a div that is contenteditable which holds a placeholder until you click it. If I clear the contents of the div on focus in Safari in iOS 6.1 I am unable to use the keyboard. It works fine in Firefox, Chrome and Safari on iOS 7.

If doesn't work either if you refocus the div (and ensure next time the content doesn't change).

Is there a fix for this as I'm making a web app that needs to support iOS 6?

Here's some test code:

<!doctype html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <div contenteditable="true">click here</div>
        <script type="text/javascript">
            document.querySelector('div').addEventListener('focus', function(event) {
                event.target.textContent = '';
            });
         </script>
    </body>
</html>

which can be tested here: http://jsbin.com/efofUNi/2

Était-ce utile?

La solution

Try delaying blanking out the textContent for a few milliseconds. For example:

document.querySelector('div').addEventListener('focus', function(event) {
    setTimeout(function() { 
       event.target.textContent = '';
    }, 5);
});

That will work around this issue in Safari on iOS 6.1.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top