For a particular field on my website, the keyboard doesn't show up on my website when running it on Safari iOS. It works on the web and Android chrome.

The keyboard will only show up if I select the multitab button on safari, and return to the website again. Then the keyboard will show up when I select the field.

What are the things that change when I select the multitab button which changes the input behaviour of the keyboard?

Update:

Before clicking the input text field (with readonly property):

<div class="form-cell password">
    <span class="label">Password</span><br>
    <input type="password" name="loginValidVO.password" maxlength="15" mandatory="true" autocomplete="off" readonly
        onfocus="this.removeAttribute('readonly');" class="placeholder" id="password">
</div>

After clicking the text field (will trigger the onfocus event and remove the 'readonly' property), however the keyboard still doesn't show up.

<div class="form-cell password">
    <span class="label">Password</span><br>
    <input type="password" name="loginValidVO.password" maxlength="15" mandatory="true" autocomplete="off"
        onfocus="this.removeAttribute('readonly');" class="placeholder" id="password">
</div>

Do we need something to refresh the view so that the removal of input field readonly property will take effect?

Android works flawlessly with the code above, just wondering why it happens only on iOS device (both safari and chrome)

For a particular field on my website, the keyboard doesn't show up on my website when running it on Safari iOS. It works on the web and Android chrome.

The keyboard will only show up if I select the multitab button on safari, and return to the website again. Then the keyboard will show up when I select the field.

What are the things that change when I select the multitab button which changes the input behaviour of the keyboard?

Update:

Before clicking the input text field (with readonly property):

<div class="form-cell password">
    <span class="label">Password</span><br>
    <input type="password" name="loginValidVO.password" maxlength="15" mandatory="true" autocomplete="off" readonly
        onfocus="this.removeAttribute('readonly');" class="placeholder" id="password">
</div>

After clicking the text field (will trigger the onfocus event and remove the 'readonly' property), however the keyboard still doesn't show up.

<div class="form-cell password">
    <span class="label">Password</span><br>
    <input type="password" name="loginValidVO.password" maxlength="15" mandatory="true" autocomplete="off"
        onfocus="this.removeAttribute('readonly');" class="placeholder" id="password">
</div>

Do we need something to refresh the view so that the removal of input field readonly property will take effect?

Android works flawlessly with the code above, just wondering why it happens only on iOS device (both safari and chrome)

• javascript
• jquery

4 Answers 4

Try adding additional attribute for the touchstart event - ontouchstart, which executes the same javascript:

<input type="password" name="extLoginValidVO.password" maxlength="20" mandatory="true" autocomplete="off" 
       ontouchstart="this.removeAttribute('readonly');" 
       onfocus="this.removeAttribute('readonly');" 
       class="placeholder"
       id="password"
       readonly>

You might want to keep onfocus too, since it's needed for desktop browsers. Here's the jsfiddle that I used: https://jsfiddle.net/u5g7t4c1/4/

I don't think it is a readonly issue. I think that is an iOS issue. I implemented this search page, and if you test it, you will notice that the keyboard on iOS does not pop up on the first click. This example is done via choices.js, and I am very interested in knowing how to fix this I would call ios bug myself.

Where/When did you put the 'readonly' property on Input?

It prevents the keyboard popsup.

Just use autocomplete="current-password" in password input and the problem will be solved! :)

I had the same issue after trial and error for hours I found that in safari iPhone 7 for password type inputs autocomplete attribute should set with "current-password".

<input type="password" name="password" autocomplete="current-password"/>