Html Question posted in
Some basic documentation can be found here.

Keyboard does not appear on iOS when use setTimeout in html

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.

Tags:

2

Answers


  1. 0

    @momo Instead of relying on a delay and mousedown event in javascript, you can try using the focus method directly along with a combination of touchstart and click events.After changing this touchstart am able to resolve the keyboard issue. Hope it helps you.

    <input type="text" id="testtext" ontouchstart="handleTouchStart(event)">
function handleTouchStart(e) {
    e.target.addEventListener('click', delayedFocus);
}
    Login or Signup to reply.
  2. 0 
    <!DOCTYPE html>
<html lang="en">
<head>
    <script>
        function focusInput(e) {
            e.preventDefault();
            var hiddenButton = document.getElementById('hiddenButton');
            hiddenButton.focus();
            setTimeout(function() {
                var testText = document.getElementById('testtext');
                testText.focus();
            }, 1000);
        }
    </script>
</head>
<body>
    <ul>
        <li>
            <input type="text" id="testtext" onmousedown="focusInput(event)">
        </li>
    </ul>
    <button id="hiddenButton" style="display: none;"></button>
</body>
</html>

    • In this code i written that the hidden button is focused when the user clicks on the input field, and the keyboard will appear as expected. After a 1-second delay, the focus is transferred to the actual input field.

    • The problem you’re having is related to a change in how Safari handles focus events on iOS. When an input field is programmatically focused, Safari now does not show the keyboard immediately. By letting the browser choose when to display the keyboard instead of having it pop up instantly each time an input field is targeted, this is done to improve user experience.

    • Unfortunately, there is no easy solution for this issue, as it is a change in Safari’s behaviour instead of a bug.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search