react实现虚拟键盘支持Ant design Input和普通input Dom元素-升级篇

本文基于上一篇文章进行优化，不需要关注业务input怎么封装，不涉及业务改动。通用自定义数组键盘输入功能如下：直接贴代码

import type { FC } from 'react'; import React, { useEffect } from 'react'; import { useRecoilValue } from 'recoil'; import { EPanelKeyModeType, EPanelNumCommand } from '@/pages/editor1/common/enum'; import ConfigManage from '@/pages/global/ConfigManage'; import { panelCommandStore } from '@/stores'; import { updateKeyMode } from '@/utils/panel'; export type AnyObjectImple = Record<string, string | number>; const INPUTTAGNAME = 'INPUT'; const INPUTTEXT = 'text'; const INPUTTEL = 'tel'; /** * 通用业务数字键盘计算 * @type cueMode: 文本模式, cueMode: 数字模式两种 * @waring 计算文本之前需要将文本现有数据 set 到panelNumberStore的originalVal上 * @desc 考虑到这里业务的逻辑较复杂，将业务提取为公用业务组件 * @desc 任何地方都可以使用该组件进行数字键盘的计算、文本的计算 * @desc 追加文本框光标位置的计算 * @returns */ const NumberKeyboard: FC = () => { // 指令 const panelCommand = useRecoilValue(panelCommandStore); const IsNormalScreen = ConfigManage.getExpandCfg().IsNormalScreen; useEffect(() => { // 文字输入框添加onfocus, onblur监听，调起小控台数字按键 if (IsNormalScreen) return; const isNeedBlur = (relateDM) => { if (relateDM?.tagName !== INPUTTAGNAME) { return true; } else { return relateDM?.type !== INPUTTEXT && relateDM?.type !== INPUTTEL; } }; const isTargetInput = (targetDMParam: HTMLInputElement) => { return ( targetDMParam?.tagName === INPUTTAGNAME && (targetDMParam?.type === INPUTTEXT || targetDMParam?.type === INPUTTEL) ); }; const onFocus = (e: FocusEvent) => { if (isTargetInput(e.target as HTMLInputElement)) { updateKeyMode(EPanelKeyModeType.numberKeyMode); } }; const onBlur = (e: FocusEvent) => { const relateDOM = e.relatedTarget as HTMLInputElement; if (isTargetInput(e.target as HTMLInputElement) && isNeedBlur(relateDOM)) { updateKeyMode(EPanelKeyModeType.restoreLastMode); } }; document.addEventListener('focusin', onFocus); document.addEventListener('focusout', onBlur); return () => { document.removeEventListener('focusin', onFocus); document.removeEventListener('focusout', onBlur); }; }, []); /** * 数字按键相关指令 * @desc 1. 处理普通输入框 * @desc 2. 处理纯数字按键模式 * @return input 结果 */ const changeNumberCommand = (commandData) => { // 指令 const { command } = commandData; try { // 获取选定对象 const selection = window.getSelection(); if (selection) { // 如果是文本节点则先获取光标对象 const range = selection?.getRangeAt(0); // 获取光标对象的范围界定对象，一般就是textNode对象 const textNode: any = range.startContainer; // 获取输入框input Dom元素, 使用的是And design Input，textNode是div，div里面且套input等子元素 const inputNode = textNode?.getElementsByTagName('input')[0]; // 光标开始 const selectionStart = inputNode.selectionStart; // 结束位置 const selectionEnd = inputNode.selectionEnd; console.info('selectionStart', selectionStart, 'selectionEnd', selectionEnd); // 处理指令运算： 数字 handleNumberCommand(command, inputNode); } } catch (e) {} }; /** * 数字指令处理 * @param command * @param inputNode */ const handleNumberCommand = (command, inputNode) => { // 业务指令转对应文本 let pressFpgaVal: number | string = command - EPanelNumCommand.num0; if (command === EPanelNumCommand.point) { pressFpgaVal = '.'; } /** * 1. 处理键盘指令，分数字模式和非数字模式，非数字模式直接追加内容，数字模式计算内容 * 2. 判断指令范围 * 3. 判断指令模式，处理对应模式数据 */ if (command >= EPanelNumCommand.num0 && command <= EPanelNumCommand.enter) { if (command <= EPanelNumCommand.point) { // 0-9数字处理指令 doNumberCommand(inputNode, pressFpgaVal); } else if (command === EPanelNumCommand.point) { // 小数点操作 // equalTen(); } else if ([EPanelNumCommand.add, EPanelNumCommand.minus].includes(command)) { // 运算指令暂时不支持 // opertBtn(command); } else if (command === EPanelNumCommand.back) { // 控台Back删除处理指令 doBackCommand(inputNode); } else if (command === EPanelNumCommand.enter) { // 控台Enter处理指令 doEnterCommand(inputNode); } } }; /** * 0-9数字处理指令 * @param command */ const doNumberCommand = (inputNode, pressFpgaVal) => { // 转换成字符串 const value = inputNode.value + ''; // 光标开始、结束位置 const selectionStart = inputNode.selectionStart; const selectionEnd = inputNode.selectionEnd; // 计算新值 const newValue = value.substr(0, selectionStart) + pressFpgaVal + value.substring(selectionEnd, value.length); console.info('value', value, newValue); // 事件发布到组件中input const evt = new UIEvent('inputchange', { bubbles: false, cancelable: false, }); const keyName = 'data'; evt[keyName] = { value: newValue, selectionStart: selectionStart + pressFpgaVal.toString().length, selectionEnd: selectionStart + pressFpgaVal.toString().length, }; // 触发onChange事件 inputNode.dispatchEvent(evt, newValue); }; /** * 控台Back删除处理指令 * @param command */ const doBackCommand = (inputNode) => { // 转换成字符串 const value = inputNode.value + ''; // 光标开始、结束位置 const selectionStart = inputNode.selectionStart; const selectionEnd = inputNode.selectionEnd; // 计算新值 const newValue = value.substr(0, selectionStart - 1) + value.substring(selectionEnd, value.length); console.info('value', value, newValue); // 事件发布到组件中input const evt = new UIEvent('inputchange', { bubbles: false, cancelable: false, }); const keyName = 'data'; evt[keyName] = { value: newValue, selectionStart: selectionStart - 1, selectionEnd: selectionStart - 1, }; // 触发onChange事件 inputNode.dispatchEvent(evt); }; /** * 控台Enter处理指令 * 触发失去焦点指令 * @param command */ const doEnterCommand = (inputNode) => { // 失焦事件发布到组件中input const evt = new UIEvent('enter', { bubbles: false, cancelable: false, }); // 触发onChange事件 inputNode.dispatchEvent(evt); }; /** * 初始化订阅数字键盘指令 */ useEffect(() => { if (panelCommand) { changeNumberCommand(panelCommand); } }, [panelCommand]); return <div />; }; export default NumberKeyboard;