7

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)

Improve this question

4 Answers 4

Reset to default
11
+50

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Thanks @Viktor Nonov, it works perfectly after adding ontouchstart attribute. Just wondering why I don't have this issue on Android Browser (chrome in particular). And are there any attributes that can support both web and touch device?
@user1872384 I couldn't find anything specific as of why it works on Android's Chrome, and does not on iOS' Safari. My suspicion is that Safari checks if the element has readonly attribute, decides that it does not need the keyboard and then fires the focus event, while Chrome might be checking for the readonly event after the focus event is fired, but I couldn't find a way to verify that. I'm not aware of any attributes that would support both web and touch device out of the box in your case. You can try something like jQuery Mobile, which defines events like tap.
Your explanation sounds valid. I couldn't find anything solid to support this scenario as well. Perhaps Android Chrome is using the V8 engine while the iOS chrome/safari is using the WebKit and JavaScriptCore (en.wikipedia.org/wiki/Google_Chrome#iOS). But I don't know what's the differences which causes this to happen
5

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.

Improve this answer

Comments

1

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

It prevents the keyboard popsup.

Improve this answer

1 Comment

Hi Chuu it's placed when it is unhide (initially this text field is hidden). I've actually remove the "readonly" property on the Input in the "onfocus" event... The "readonly" property is removed but the keyboard still doesn't appear...
0

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"/>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.