选择 <input> 时不显示键盘仅限 iOS [英] Keyboard doesn't show up when selecting <input> on iOS only

问题描述

对于我网站上的特定字段，在 Safari iOS 上运行时，我的网站上没有显示键盘.它适用于网络和 Android chrome.

只有当我在 safari 上选择多标签按钮并再次返回网站时，键盘才会显示.然后当我选择该字段时键盘会出现.

当我选择改变键盘输入行为的多标签按钮时，有哪些变化?

更新:

点击输入文本字段前(具有只读属性):

<span class="label">密码</span><br><input type="password" name="loginValidVO.password" maxlength="15" required="true" autocomplete="off" readonlyonfocus="this.removeAttribute('readonly');"类=占位符"id=密码">

单击文本字段后(将触发 onfocus 事件并删除 'readonly' 属性)，但是键盘仍然没有显示.

<span class="label">密码</span><br><input type="password" name="loginValidVO.password" maxlength="15" required="true" autocomplete="off"onfocus="this.removeAttribute('readonly');"类=占位符"id=密码">

我们是否需要一些东西来刷新视图，以便删除输入字段的只读属性生效?

Android 与上面的代码完美配合，只是想知道为什么它只发生在 iOS 设备(Safari 和 chrome)上

解决方案

尝试为 touchstart 事件添加附加属性 - ontouchstart，它执行相同的 javascript:

<input type="password" name="extLoginValidVO.password" maxlength="20" required="true" autocomplete="off"ontouchstart="this.removeAttribute('readonly');"onfocus="this.removeAttribute('readonly');"类=占位符"id="密码"只读>

您可能也希望保持 onfocus，因为桌面浏览器需要它.这是我使用的 jsfiddle:https://jsfiddle.net/u5g7t4c1/4/

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)

解决方案

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/

这篇关于选择 <input> 时不显示键盘仅限 iOS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！