Xamarin.Forms WebView能否支持外接物理键盘输入功能？

核心实现逻辑为通过自定义渲染器分别在Android、iOS原生层处理物理键盘事件，转发给WebView控件响应，无需依赖第三方库即可实现全场景输入。

实现步骤 #

• 共享层创建自定义WebView控件
  首先在共享项目中创建继承自原生WebView的自定义控件，用于后续绑定平台渲染器：

namespace YourAppName.Controls
{
    public class CustomWebView : WebView
    {
        // 可选声明按键回调，用于共享层处理自定义按键逻辑
        public event EventHandler<KeyEventArgs> KeyPressed;

        public class KeyEventArgs
        {
            public char KeyChar { get; set; }
            public int KeyCode { get; set; }
            public bool IsShiftPressed { get; set; }
        }
    }
}

• Android平台自定义渲染器实现
  Android原生WebView本身已支持物理键盘输入，绝大多数无法输入的问题由WebView未获取焦点导致，渲染器只需强制WebView获取焦点并分发按键事件即可：

using Android.Content;
using Android.Views;
using YourAppName.Controls;
using YourAppName.Droid.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace YourAppName.Droid.Renderers
{
    public class CustomWebViewRenderer : WebViewRenderer
    {
        public CustomWebViewRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<WebView> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                // 开启WebView焦点权限
                Control.Focusable = true;
                Control.FocusableInTouchMode = true;
                Control.RequestFocus(ViewFocusability.FocusDown);
                // 启用必要的WebView配置
                Control.Settings.JavaScriptEnabled = true;
                Control.Settings.DomStorageEnabled = true;
            }
        }

        public override bool OnKeyDown(Keycode keyCode, KeyEvent e)
        {
            // 将按键事件优先分发给WebView处理
            if (Control != null && Control.IsFocused)
            {
                return Control.DispatchKeyEvent(e) || base.OnKeyDown(keyCode, e);
            }
            return base.OnKeyDown(keyCode, e);
        }
    }
}

• iOS平台自定义渲染器实现
  iOS的WKWebView对外接物理键盘的输入事件默认拦截，需要重写按键响应方法，通过JS注入将输入内容同步到当前激活的输入元素中：

using UIKit;
using YourAppName.Controls;
using YourAppName.iOS.Renderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using WebKit;

[assembly: ExportRenderer(typeof(CustomWebView), typeof(CustomWebViewRenderer))]
namespace YourAppName.iOS.Renderers
{
    public class CustomWebViewRenderer : WkWebViewRenderer
    {
        public CustomWebViewRenderer() : base(new WKWebViewConfiguration()) { }

        // 允许WebView成为第一响应者接收按键事件
        public override bool CanBecomeFirstResponder => true;

        public override void KeyPressed(UIKeyEventArgs evt)
        {
            base.KeyPressed(evt);
            // 处理普通字符输入
            if (!string.IsNullOrEmpty(evt.Characters))
            {
                var injectJs = $"document.activeElement.value += '{evt.Characters.Replace("'", "\\'")}';";
                EvaluateJavaScriptAsync(injectJs);
            }
            // 处理退格键
            else if (evt.KeyCode == UIKeyCode.Delete)
            {
                var injectJs = "const el = document.activeElement; el.value = el.value.slice(0, -1);";
                EvaluateJavaScriptAsync(injectJs);
            }
            // 处理回车键，可实现搜索提交、网址跳转逻辑
            else if (evt.KeyCode == UIKeyCode.Return)
            {
                var injectJs = "if(document.activeElement.form) document.activeElement.form.submit();";
                EvaluateJavaScriptAsync(injectJs);
            }
        }

        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                BecomeFirstResponder();
            }
        }
    }
}

• 页面中使用自定义WebView
  替换原有XAML中的默认WebView控件即可：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:YourAppName.Controls"
             x:Class="YourAppName.WebViewPage">
    <controls:CustomWebView Source="https://google.com" 
                            HorizontalOptions="Fill" 
                            VerticalOptions="Fill"/>
</ContentPage>

注意事项 #

• 不要给WebView设置InputTransparent="True"属性，该属性会拦截所有输入事件
• 若加载的自定义网页存在禁止输入的JS逻辑，需要先调整前端代码放开输入限制
• 如需支持方向键、功能键等特殊按键，可在iOS渲染器的KeyPressed方法中扩展对应KeyCode的处理逻辑，注入对应的JS操作即可

内容的提问来源于stack exchange，提问作者Rafał Wolschlaeger