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

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 触摸键盘实现的 deliberate decision。

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

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

如果它是 react-native 那么我们可以扩展 webivew 库并覆盖 onCreateInputConnection 方法。对于任何想要扩展 webview 的人，这里是代码

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

打包你的包名；

import com.reactnativecommunity.webview.RNCWebViewManager;
import com.facebook.react.uimanager.ThemedReactContext;
import android.view.inputmethod.BaseInputConnection;
import android.view.inputmethod.InputConnectionWrapper;
import com.facebook.react.module.annotations.ReactModule;
import android.text.InputType;
import android.view.KeyEvent;
import android.view.inputmethod.EditorInfo;
import android.view.inputmethod.InputConnection;
import android.os.Build;
import android.view.ViewGroup.LayoutParams;
import android.webkit.ConsoleMessage;
import android.webkit.GeolocationPermissions;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebSettings;
import android.webkit.CookieManager;


@ReactModule(name = CustomWebViewManager.REACT_CLASS)
public class CustomWebViewManager extends RNCWebViewManager {
  /* This name must match what we’re referring to in JS */
  protected static final String REACT_CLASS = “MyCustomWebView”;

  protected static class CustomWebViewClient extends RNCWebViewManager.RNCWebViewClient { }

  protected static class CustomWebView extends RNCWebViewManager.RNCWebView  {
    public CustomWebView(ThemedReactContext reactContext) {
      super(reactContext);
    }
    
    @Override
    public InputConnection onCreateInputConnection(EditorInfo outAttrs) {   
        return new BaseInputConnection(this, false);
    }
  }

  

  @Override
  protected RNCWebView createRNCWebViewInstance(ThemedReactContext reactContext) {
    return new CustomWebView(reactContext);
  }

  @Override
  public String getName() {
    return REACT_CLASS;
  }



  @Override
  protected void addEventEmitters(ThemedReactContext reactContext, WebView view) {
    view.setWebViewClient(new CustomWebViewClient());
  }
}

1. 然后创建自己的web视图包文件CustomWebViewPackage.java

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

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

MyCustomWebView = requireNativeComponent(‘MyCustomWebView’, MyNotesEditor,
    WebView.extraNativeComponentConfig);    

 <Webview
     nativeConfig={{component: MyCustomWebView}}
  />

Answer 3

不幸的是，这是react-native-webview 问题

Keyboard event event.key is unidentified #1473