Flutter中使用InAppWebView能否控制键盘类型？

你可以通过以下几种方式实现自定义数字键盘的显示：

1. 直接修改网页输入框属性（优先推荐） #

WebView的键盘类型由网页中的输入框元素决定，直接在网页的input标签上指定对应属性即可唤起数字键盘：

• 使用type="number"：适合纯数字输入，会显示带数字和小数点的键盘
• 使用type="tel"：适合电话号码输入，会显示带数字和拨号键的键盘
• 使用inputmode="numeric"：HTML5属性，更精准控制数字键盘显示（部分场景兼容性更好）

示例HTML代码：

<input type="number" placeholder="请输入数字">
<input type="tel" placeholder="请输入手机号">
<input inputmode="numeric" placeholder="请输入数值">

2. 无法控制网页时，通过JS注入修改输入框 #

如果网页内容不由你控制，可以在WebView加载完成后注入JavaScript代码，修改目标输入框的属性：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的网页地址")),
  onLoadStop: (controller, url) async {
    // 注入JS修改指定输入框的属性，示例为修改所有class为num-input的输入框
    await controller.evaluateJavascript(source: """
      const targetInputs = document.querySelectorAll('.num-input');
      targetInputs.forEach(input => {
        input.type = 'number';
        input.inputmode = 'numeric';
      });
    """);
  },
)

3. 针对Android设置全局默认键盘类型 #

如果需要全局默认唤起数字键盘，可以通过AndroidInAppWebViewOptions配置：

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse("你的网页地址")),
  androidOptions: AndroidInAppWebViewOptions(
    defaultKeyboardType: AndroidKeyboardType.NUMBER,
  ),
)

注意：iOS端暂无全局默认键盘类型的配置项，建议结合网页input属性或JS注入实现。

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