iOS 12.4 Safari浏览器聚焦其他输入框时自动切换键盘布局问题求助

问题场景 #

使用设备为iPhone 6g，系统版本为12.4，在Safari浏览器中将键盘布局切换为其他语言后，只要聚焦其他输入字段，键盘布局就会自动变回系统默认键盘语言。
相关代码：

form input {
    font-size: 16px;
}

form {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="text" />
        <br>
        <br>
        <input type="text" />
    </form>

</body>
</html>

问题原因 #

这是iOS 12.x版本Safari的固有特性，浏览器会把输入框的预期输入语言和页面根标签的lang属性绑定，每次输入框触发聚焦操作时，都会自动匹配lang属性对应的语言键盘，覆盖用户之前手动切换的键盘布局。代码里根标签设置了lang="en"，所以每次聚焦输入框都会自动切回英文键盘。

修复方案 #

• 调整页面根标签的lang属性：如果页面主要面向特定语言用户，把<html lang="en">改成对应语言的属性值即可，比如面向中文用户改为lang="zh-CN"；如果需要适配多语言用户，直接移除根标签的lang属性，浏览器就不会强制绑定统一的键盘语言。
• 给单个输入框指定独立属性：如果不同输入框需要匹配不同的键盘布局，可以给对应输入框单独加lang属性，比如需要日文输入的输入框加lang="ja"，需要数字输入的输入框加inputmode="numeric"，Safari会优先读取输入框本身的属性配置，不会每次重置为系统默认键盘。

内容的提问来源于stack exchange，提问作者Aso