Flutter WebView实现输入键盘初始大写状态的方案

针对你的需求，只需调整WebView页面加载完成后注入的JavaScript代码，修改输入框的相关属性即可实现效果：

修改核心逻辑 #

在onPageFinished回调的JavaScript代码中，调整输入框的属性配置：将autocapitalize设为characters实现初始全大写，同时添加autocorrect和spellcheck属性禁止系统自动修改文本。

_controller.runJavaScript('''
var inputsField = document.getElementsByClassName('text-field__input');
for (var i = 0; i < inputsField.length; i++) {
  // 设置键盘唤起时默认全大写
  inputsField[i].setAttribute('autocapitalize', 'characters');
  // 关闭自动更正，防止输入内容被系统修改
  inputsField[i].setAttribute('autocorrect', 'off');
  // 关闭拼写检查，避免自动修正干扰
  inputsField[i].setAttribute('spellcheck', 'false');
  inputsField[i].style.appearance="textfield";
}
''');

属性说明 #

• autocapitalize='characters'：强制屏幕键盘默认处于全大写状态，用户可自主切换为小写输入
• autocorrect='off'：禁用浏览器/系统的自动更正功能，确保用户输入内容完全保留
• spellcheck='false'：关闭拼写检查，避免拼写提示或自动修正影响输入体验

完整修改后的代码 #

import 'package:beamer/beamer.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

import '../../../../../../app/app.dart';
import '../../widgets/widgets.dart';

class SignUpWebView extends StatefulWidget {
  const SignUpWebView({super.key});

  @override
  State<SignUpWebView> createState() => _SignUpWebViewState();
}

class _SignUpWebViewState extends State<SignUpWebView> {
  late final WebViewController _controller;

  bool _isLoading = true;

  void _transfer(String url) {
    final link = url.replaceFirst(
      'openid-connect/auth',
      'openid-connect/registrations',
    );
    _controller.loadRequest(Uri.parse(link));
  }

  @override
  void initState() {
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..enableZoom(false)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (String url) {
            if (url.startsWith(
              'https://test.com',
            )) {
              _transfer(url);
            }
          },
          onPageFinished: (String url) {
            if (url.startsWith(
              'https://test.com',
            )) {
              _controller.runJavaScript('''
              var inputsField = document.getElementsByClassName('text-field__input');
              for (var i = 0; i < inputsField.length; i++) {
                inputsField[i].setAttribute('autocapitalize', 'characters');
                inputsField[i].setAttribute('autocorrect', 'off');
                inputsField[i].setAttribute('spellcheck', 'false');
                inputsField[i].style.appearance="textfield";
              }
              ''');
              setState(() {
                _isLoading = false;
              });
            }
          },
          onNavigationRequest: (NavigationRequest request) {
            if (request.url.startsWith(
              'https://test.com',
            )) {
              context.beamToNamed(SignInLocation.signInPath);
            }
            if (request.url.startsWith(
              'https://google.com',
            )) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse('https://test.com'));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return Scaffold(
      backgroundColor: theme.palette.bgContrast,
      appBar: const SignUpAppBar(),
      body: _isLoading
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : SafeArea(
              child: WebViewWidget(
                controller: _controller,
                layoutDirection: TextDirection.rtl,
              ),
            ),
    );
  }
}

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