React Native：Webview中输入框失焦时如何保持键盘不收起？

要保持键盘在输入框切换焦点时不收起，核心是避免先让当前输入框失焦，直接将焦点切换到目标输入框，同时确保WebView的配置允许JS主动触发焦点。

修改后的代码 #

export default function Test() {
    const viewHTML = `
        <html>
            <body>
                <script>
                    function test1() {
                        // 直接切换焦点到test2，不要先blur test1
                        document.getElementById("test2").focus();
                    }
                </script>
                <input id="test1" oninput="test1()" style="height:60px"/>
                <input id="test2" style="height:60px"/>
            </body>
        </html>
    `;
    return (
        <View>
            <WebView
                style={{width:370, height:600}}
                hideKeyboardAccessoryView={true}
                keyboardDisplayRequiresUserAction={false}
                javaScriptEnabled={true}
                source={{ html: viewHTML}}
            />
        </View>
    );
};

关键说明 #

• 不要手动调用blur()：当你主动调用当前输入框的blur()时，系统会认为所有输入元素都失去焦点，从而收起键盘。直接调用目标输入框的focus()，系统会自动转移焦点并保持键盘打开。
• 保留keyboardDisplayRequiresUserAction={false}：这个配置是React Native WebView允许JS代码主动触发输入框焦点的关键，必须开启。
• 若切换时机有问题（比如输入太快导致焦点没跟上），可以给focus()添加微小延迟，比如：

  setTimeout(() => {
      document.getElementById("test2").focus();
  }, 50);
  

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