Keyboard event event.key is unidentified on android webview

Question

Try load webview with this html 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 is unidentified or event.keyCode is 229 always

Answer 1

The is a deliberate decision from the Android touch keyboard implementation.

The only workaround is dealing the actual input text:

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

If its react-native then we can extend the webivew library and override the onCreateInputConnection method. For anyone who wants to extend webview here is the code

1. First create CustomWebviewManager.java file and add the content

package your-package-name;

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());
  }
}

2. Then create your own web view package file 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());
        }
    }
   

Then in your Webivew component Load it like this

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

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