android webview 上的键盘事件 event.key 无法识别

Question

尝试在 React Native 上使用此 html 加载 webview

    <div
          tabindex="1"
          contenteditable="true"
          id="test-test"
          style="width: 300px; height: 300px;"
        >
   </div>
   <script>
          document
            .getElementById(“test-test”)
            .addEventListener(“keydown”, function (e) {
              alert(e.key || e.keyCode || “empty”);
            });
   </script>

event.key 未识别或 event.keyCode 始终为 229

Answer 1

这是Android 触摸键盘实现的一个深思熟虑的决定。

唯一的解决方法是处理实际的输入文本：

inputElement.addEventListener('beforeinput', e => {
    if(e.inputType === 'deleteContentBackward') {
        // check whatever you want to check for
        if(!myCondition(e))
            e.preventDefault() // will block the deletion
    }
})

Answer 2

如果它是re​​act-native，那么我们可以扩展webivew库并重写onCreateInputConnection方法。对于任何想要扩展 webview 的人来说，这里是代码

\n

\n
1. 首先创建CustomWebviewManager.java文件并添加内容
\n

\n

打包你的包名；

\n

import com.reactnativecommunity.webview.RNCWebViewManager;\nimport com.facebook.react.uimanager.ThemedReactContext;\nimport android.view.inputmethod.BaseInputConnection;\nimport android.view.inputmethod.InputConnectionWrapper;\nimport com.facebook.react.module.annotations.ReactModule;\nimport android.text.InputType;\nimport android.view.KeyEvent;\nimport android.view.inputmethod.EditorInfo;\nimport android.view.inputmethod.InputConnection;\nimport android.os.Build;\nimport android.view.ViewGroup.LayoutParams;\nimport android.webkit.ConsoleMessage;\nimport android.webkit.GeolocationPermissions;\nimport android.webkit.WebChromeClient;\nimport android.webkit.WebView;\nimport android.webkit.WebViewClient;\nimport android.webkit.JavascriptInterface;\nimport android.webkit.ValueCallback;\nimport android.webkit.WebSettings;\nimport android.webkit.CookieManager;\n\n\n@ReactModule(name = CustomWebViewManager.REACT_CLASS)\npublic class CustomWebViewManager extends RNCWebViewManager {\n  /* This name must match what we\xe2\x80\x99re referring to in JS */\n  protected static final String REACT_CLASS = \xe2\x80\x9cMyCustomWebView\xe2\x80\x9d;\n\n  protected static class CustomWebViewClient extends RNCWebViewManager.RNCWebViewClient { }\n\n  protected static class CustomWebView extends RNCWebViewManager.RNCWebView  {\n    public CustomWebView(ThemedReactContext reactContext) {\n      super(reactContext);\n    }\n    \n    @Override\n    public InputConnection onCreateInputConnection(EditorInfo outAttrs) {   \n        return new BaseInputConnection(this, false);\n    }\n  }\n\n  \n\n  @Override\n  protected RNCWebView createRNCWebViewInstance(ThemedReactContext reactContext) {\n    return new CustomWebView(reactContext);\n  }\n\n  @Override\n  public String getName() {\n    return REACT_CLASS;\n  }\n\n\n\n  @Override\n  protected void addEventEmitters(ThemedReactContext reactContext, WebView view) {\n    view.setWebViewClient(new CustomWebViewClient());\n  }\n}\n

\n

\n

2. 然后创建自己的Web视图包文件CustomWebViewPackage.java

   \n

    package your-package-name;\n import java.util.Arrays;\n import java.util.Collections;\n import java.util.ArrayList;\n import java.util.List;\n import com.facebook.react.ReactPackage;\n import com.facebook.react.bridge.NativeModule;\n import com.facebook.react.bridge.ReactApplicationContext;\n import com.facebook.react.uimanager.ViewManager;\n\n public class CustomWebViewPackage implements ReactPackage {\n     @Override\n     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {\n       return Collections.emptyList();\n     }\n\n     @Override\n     public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {\n       return Arrays.<ViewManager>asList(new CustomWebViewManager());\n     }\n }\n

   \n
\n

\n

然后在你的Webivew组件中像这样加载它

\n

MyCustomWebView = requireNativeComponent(\xe2\x80\x98MyCustomWebView\xe2\x80\x99, MyNotesEditor,\n    WebView.extraNativeComponentConfig);    \n\n <Webview\n     nativeConfig={{component: MyCustomWebView}}\n  />\n

\n