Android WebView如何为第三方网页的输入字段强制唤起数字键盘

可行解决方案 #

核心思路是利用WebView的JavaScript注入能力，在页面加载完成后自动修改第三方网页的输入框类型属性，不需要改动对方站点代码，仅需调整你们现有APP的少量代码即可实现。

具体修改步骤 #

你已经在WebSetting中开启了JavaScript权限，仅需要修改MainActivity.java中WebViewClient的配置，重写页面加载完成回调注入JS代码即可：

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = (WebView) findViewById(R.id.webview);
        // 修改WebViewClient配置
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                // 注入JS代码：将所有text类型输入框改为number类型
                String injectJs = "javascript:document.querySelectorAll('input[type=\"text\"]').forEach(input => {input.type = 'number';});";
                // 适配不同系统版本执行JS
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                    view.evaluateJavascript(injectJs, null);
                } else {
                    view.loadUrl(injectJs);
                }
            }
        });
        webView.setInitialScale(300);
        webView.loadUrl("https://site.time.clock");

        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
    }
}

优化方案（可选） #

如果考勤页面存在多个text类型输入框，不想全部修改，可以先通过浏览器开发者工具查看工号输入框的唯一属性（比如id、name值），调整注入的JS代码精准匹配单个输入框即可，示例：

// 假设输入框name属性为emp_pin，仅修改该输入框
String injectJs = "javascript:const targetInput = document.querySelector('input[name=\"emp_pin\"]'); if(targetInput) targetInput.type = 'number';";

如果页面输入框是动态加载的，可以将注入代码改为监听全局聚焦事件，只要text类型输入框被点击就自动修改类型：

String injectJs = "javascript:document.addEventListener('focus', e => {if(e.target.tagName === 'INPUT' && e.target.type === 'text') e.target.type = 'number';}, true);";

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