Arrow buttons, which don't work on Safari, move left or right, type something wrong when the cursor hovers, and click the Backspace button

This issue has been tracked since 2022-06-09.

import Keyboard from "../lib";
import "./css/BasicDemo.css";
// import "./css/ButtonThemeDemo.css";

const setDOM = () => {
document.querySelector("body").innerHTML = <input class="input" id="setpwd" autofocus=true placeholder="Tap on the virtual keyboard to start 12"> <div class="simple-keyboard"></div>;
};

{ /* <textarea class="input" placeholder="Tap on the virtual keyboard to start 12"></textarea> */ }

class Demo {
constructor() {
setDOM();

    let keyboard = new Keyboard({
        onChange: input => onChange(input),
        onKeyReleased: button => onKeyReleased(button),
        preventMouseDownDefault: true,
        layout: {
            default: [
                "1 2 3 4 5 6 7 8 9 0 - {bksp}",
                "q w e r t y u i o p [ ]",
                "a s d f g h j k l ; ' `",
                "z x c v b n m , . / \\ =",
                "{shift} {Cap} {space} {<-} {->} {Alt} {cancel} {enter}"
            ],
            shift: [
                "! @ # $ % ^ & * ( ) _ {bksp}",
                "Q W E R T Y U I O P { }",
                'A S D F G H J K L : " ~',
                "Z X C V B N M < > ? | +",
                "{shift} {Cap} {space} {<-} {->} {Alt} {cancel} {enter}"
            ]
        },
        display: {
            "{bksp}": "backspace",
            "{enter}": "√",
            "{space}": " ",
            "{tab}": "tab",
            "{Cap}": "Cap",
            "{shift}": "Shift",
            "{cancel}": "×",
            "{<-}": "←",
            "{->}": "→",
            "{Alt}": "Alt"
        }
    });

    /**
     * Update simple-keyboard when input is changed directly
     */
    document.querySelector(".input").addEventListener("input", event => {
        keyboard.setInput(event.target.value);
    });


    function onChange(input) {
        let inputElement = document.querySelector(".input");

        /**
         * Updating input's value
         */
        inputElement.value = input;

        /**
         * Synchronizing input caret position
         */
        let caretPosition = keyboard.caretPosition;
        if (caretPosition !== null)
            setInputCaretPosition(inputElement, caretPosition, null);

    }

    function setInputCaretPosition(elem, pos, button) {
        if (elem.setSelectionRange) {
            elem.focus();
            elem.setSelectionRange(pos, pos);
        }
    }

    function onKeyReleased(button) {
        /**
         * If you want to handle the shift and caps lock buttons
         */
        if (button === "{shift}" || button === "{lock}") handleShift();

        if (button === "{->}" || button === "{<-}") {
            var inputElement = document.querySelector(".input");
            var caretPosition = keyboard.caretPosition;

            if (inputElement.value.length > 0 && caretPosition == null)
                caretPosition = inputElement.value.length;

            if (caretPosition > inputElement.value.length)
                caretPosition = inputElement.value.length;

            let currentcaretPosition = button === "{<-}" ? caretPosition - 1 : caretPosition + 1;

            if (caretPosition !== null && currentcaretPosition >= 0) {
                keyboard.caretPosition = currentcaretPosition;
                setInputCaretPosition(inputElement, currentcaretPosition, button);
            }

            // if (button === "{<-}")
            //     keyboard.caretPosition = caretPosition - 1;
            // if (button === "{->}")
            //     keyboard.caretPosition = caretPosition + 1;
        }

        console.log(keyboard.caretPosition)
    }


    function handleShift() {
        let currentLayout = keyboard.options.layoutName;
        let shiftToggle = currentLayout === "default" ? "shift" : "default";

        keyboard.setOptions({
            layoutName: shiftToggle
        });
    }
}

}

export default Demo;

hodgef wrote this answer on 2022-07-02

Sorry @meichuanlong, this bug report is not of very good quality. Please read the template that appears when you create your bug and add the requested information.

More Details About Repo
Owner Name hodgef
Repo Name simple-keyboard
Full Name hodgef/simple-keyboard
Language JavaScript
Created Date 2018-03-02
Updated Date 2022-12-02
Star Count 1737
Watcher Count 20
Fork Count 130
Issue Count 0

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date