Click here - to use the wp menu builder

javascript – Keyboard does not appear on iOS when use setTimeout in html

February 1, 2024

I am experiencing an issue when running a script on Safari, specifically WebKit. Here is a sample HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        function delayedFocus(e) {
            e.preventDefault();
            setTimeout(function() {
                e.target.focus();
            }, 1000); // Adjust the delay time as needed (in milliseconds)
        }
    </script>
</head>
<body>
    <ul>
        <li>
            <input type="text" id="testtext" onmousedown="delayedFocus(event)">
        </li>
    </ul>
</body>
</html>

The logic behind this script is to introduce a 1-second delay when the user clicks on the textbox. After 1 second, the keyboard should appear. Testing on Android mobile devices shows the expected behavior. However, on iPhones, the textbox receives focus, but the keyboard does not appear. This issue has been observed on various iOS versions, with the script working only on iOS 15.

If you have any insights or solutions to address this compatibility issue, it would be greatly appreciated. Thank you.