Keyboard doesn't show up when selecting on iOS only

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-format" style="center">
<div class="form-cell password">
    <span class="label">Password</span><br>
    <input type="password" name="extLoginValidVO.password" maxlength="20" 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-format" style="center">
<div class="form-cell password">
    <span class="label">Password</span><br>
    <input type="password" name="extLoginValidVO.password" maxlength="20" 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)

from Keyboard doesn't show up when selecting on iOS only