jquery 虚拟键盘 - Chrome 和 Edge 中的光标不闪烁答案

【问题标题】：jquery virtual keyboard - Curser not blinking in Chrome and Edgejquery 虚拟键盘 - Chrome 和 Edge 中的光标不闪烁
【发布时间】：2021-06-15 16:34:13
【问题描述】：

我使用了 jQuery 虚拟键盘，但是在 chrome 和 Edge 浏览器中发现了一个问题。当我单击文本框时，光标焦点不起作用，并且在编辑文本时无法看到正在输入的位置。但在 IE 浏览器中它运行良好。我需要知道为什么它在 Chrome 和 Edge 浏览器中不起作用以及如何解决这个问题。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript jquery cursor microsoft-edge virtual-keyboard

【解决方案1】：

根据你的描述，我创建了一个简单的例子来测试，运行正常，输入框可以正确显示光标。这是我的测试演示（在 Edge 版本 91.0.864.48 中）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.3/css/keyboard-basic.min.css" rel="stylesheet" />
</head>
<body>
    <div>
        Enter something here:  <input type="text" name="name" contenteditable="true" id="enterBox" value="" />
    </div>
    <br />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/virtual-keyboard/1.30.3/js/jquery.keyboard.min.js"></script>
    <script>
        $.keyboard.keyaction.undo = function (base) {
            base.execCommand('undo');
            return false;
        };
        $.keyboard.keyaction.redo = function (base) {
            base.execCommand('redo');
            return false;
        };

        $('#enterBox').keyboard({
            usePreview: true, // disabled for contenteditable
            useCombos: false,
            autoAccept: true,
            layout: 'custom',
            customLayout: {
                'normal': [
                    '` 1 2 3 4 5 6 7 8 9 0 - = {del} {b}',
                    '{tab} q w e r t y u i o p [ ] \\',
                    'a s d f g h j k l ; \' {enter}',
                    '{shift} z x c v b n m , . / {shift}',
                    '{accept} {space} {left} {right} {undo:Undo} {redo:Redo}'
                ],
                'shift': [
                    '~ ! @ # $ % ^ & * ( ) _ + {del} {b}',
                    '{tab} Q W E R T Y U I O P { } |',
                    'A S D F G H J K L : " {enter}',
                    '{shift} Z X C V B N M < > ? {shift}',
                    '{accept} {space} {left} {right} {undo:Undo} {redo:Redo}'
                ]
            },
            display: {
                del: '\u2326:Delete',
                redo: '↻',
                undo: '↺'
            }
        });
            //.addTyping();
    </script>
</body>
</html>

结果： https://i.stack.imgur.com/J4qG9.gif

你能提供一个最小的例子来重现这个问题吗？这将有助于解决问题，感谢您的理解。

【讨论】：