android 网络视图上的键盘事件 event.key 未被识别

Question

尝试使用此 html 加载 webview on react native

    <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.key代码总是 229

Answer 1

很遗憾，这是 react-native-webview 个问题

Keyboard event event.key is unidentified #1473

Answer 2

deliberate decision 来自 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 3

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

首先创建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());
  }
}

然后创建自己的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}}
  />

android 网络视图上的键盘事件 event.key 未被识别

Keyboard event event.key is unidentified on android webview

android

webview

reactjs

react-native