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

Question

尝试在react原生上加载带有此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.key代码始终为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

如果它是本地的react，那么我们可以扩展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());
}
}

2. 然后创建您自己的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问题

键盘事件事件.key未识别#1473

Answer 4

当使用虚拟/移动键盘时，正式名称为IME(输入法编辑器(，W3C标准规定KeyboardEvent的e.keyCode应为229，e.key应为"身份不明"；。

此外，e.key已弃用；如果你想支持"；所有"；浏览器MSDN提出的解决方案很冗长。

替代/有效方法：检查值，而不是键。如果您正在使用一个框架进行开发，请收听诸如"onChange"或"ionInput"之类的自定义事件；evt.detail.value(其中evt是CustomEvent(将为您提供键入的字符。如果您使用的是vanilla组件，请查看是否可以处理整个输入值，如下面的示例所示。

以下是筛选输入的示例，只允许使用字母数字字符：

const input = document.getElementById("myInput");
const regex = /^[a-zA-Z0-9]+$/;
input.addEventListener("keydown", function(event) {
const value = input.value;
if (!value) {
return;
}
if (regex.test(value)) {
return;
}
input.value = value.replace(/[W_]/g, "");
event.preventDefault();
});