feat(OtpInput): support keydown event on android (#7519)

* cardupload增加删除确认属性

cardupload增加删除确认属性

* chore: bump version 10.2.1

* refactor: 移除基类更改

* feat: 增加删除确认弹窗相关参数

* Update OtpInput.razor.js

修改otpinput在安卓和鸿蒙下的输入问题

* chore: 更新脚本

* refactor: 更新代码

* revert: 撤销更改

* refactor: 增加 beforeinput 事件

* refactor: 增加传值

* revert: 移除日志

* chore: 更新条件

* feat: 实现回退逻辑

* chore: 更新代码支持 Delete

---------

Co-authored-by: Argo Zhang <argo@live.ca>

Author: Tony-ST0754

src/BootstrapBlazor/Components/Input/OtpInput.razor.js

@@ -2,47 +2,47 @@ import EventHandler from '../../modules/event-handler.js'
 
 export function init(id, invoke, method) {
     const el = document.getElementById(id);
-    const skipKeys = ['Enter', 'Tab', 'Shift', 'Control', 'Alt'];
+    let triggerKeydown = false;
+
+    EventHandler.on(el, 'beforeinput', '.bb-otp-item', e => {
+        if (triggerKeydown) {
+            return;
+        }
+
+        processKey(el, e, e.data);
+    });
     EventHandler.on(el, 'input', '.bb-otp-item', e => {
         const isNumber = e.target.getAttribute('type') === 'number';
         if (isNumber && e.target.value.length > 1) {
             e.target.value = e.target.value.slice(1, 2);
         }
         setValue(el, invoke, method);
-        if (e.target.value.length === 1) {
-            setNextFocus(el, e.target);
-        }
     });
     EventHandler.on(el, 'keydown', '.bb-otp-item', e => {
         if (e.ctrlKey) {
             return;
         }
 
-        const isNumber = e.target.getAttribute('type') === 'number';
-        if (skipKeys.indexOf(e.key) > -1) {
-
-        }
-        else if (e.key === 'Backspace' || e.key === 'ArrowLeft') {
-            setPrevFocus(el, e.target);
-        }
-        else if (e.key === 'ArrowRight') {
-            setNextFocus(el, e.target);
+        if (e.key.charCodeAt(0) === 0) {
+            return;
         }
-        else if (isNumber) {
-            if ("0123456789".indexOf(e.key) > -1) {
-                setNextFocus(el, e.target);
-            }
-            else {
-                e.preventDefault();
-            }
+        triggerKeydown = true;
+        processKey(el, e, e.key);
+    });
+    EventHandler.on(el, 'keyup', '.bb-otp-item', e => {
+        const input = event.target;
+        const value = e.key;
+
+        if (value === 'Backspace' || value === 'ArrowLeft') {
+            setPrevFocus(el, input);
         }
-        else if ("abcdefghijklmnopqrstuvwxyzABCDEDFGHIJKLMNOPQRSTUVWXYZ0123456789".indexOf(e.key) > -1) {
-            setNextFocus(el, e.target);
+        else if (value === 'ArrowRight') {
+            setNextFocus(el, input);
         }
-        else {
-            e.preventDefault();
+        else if (value === 'Delete') {
+            setFocus(input);
         }
-    });
+    })
     EventHandler.on(el, 'focus', '.bb-otp-item', e => {
         if (e.target.select) {
             e.target.select();
@@ -101,9 +101,35 @@ const setFocus = target => {
     }, 0);
 }
 
+const processKey = (el, event, value) => {
+    const skipKeys = ['Enter', 'Tab', 'Shift', 'Control', 'Alt', 'Backspace', 'ArrowLeft', 'ArrowRight', 'Delete'];
+    const input = event.target;
+    const isNumber = input.getAttribute('type') === 'number';
+
+    if (skipKeys.indexOf(value) > -1) {
+
+    }
+    else if (isNumber) {
+        if ("0123456789".indexOf(value) > -1) {
+            setNextFocus(el, input);
+        }
+        else {
+            event.preventDefault();
+        }
+    }
+    else if ("abcdefghijklmnopqrstuvwxyzABCDEDFGHIJKLMNOPQRSTUVWXYZ0123456789".indexOf(value) > -1) {
+        setNextFocus(el, input);
+    }
+    else {
+        event.preventDefault();
+    }
+}
+
 export function dispose(id) {
     const el = document.getElementById(id);
     EventHandler.off(el, 'input');
     EventHandler.off(el, 'keydown');
+    EventHandler.off(el, 'keyup');
+    EventHandler.off(el, 'beforeinput');
     EventHandler.off(el, 'focus');
 }