What is the purpose of this onKeyDown Event Function?-CodePudding

I found this code in a project and I am not sure what is the purpose of it. It is passed in the onKeyDown event to an editable div. Is this function doing anything useful or can I remove it?

stopEditing = (event) => {
    let keys = {
        backspace: 8,
        shift: 16,
        ctrl: 17,
        alt: 18,
        delete: 46,
        leftArrow: 37,
        upArrow: 38,
        rightArrow: 39,
        downArrow: 40,
    }

    let utils = {
        special: {},
        navigational: {},
        isSpecial(e) {
            return typeof this.special[e.keyCode] !== 'undefined'
        },
        isNavigational(e) {
            return typeof this.navigational[e.keyCode] !== 'undefined'
        },
    }

    utils.special[keys['backspace']] = true
    utils.special[keys['shift']] = true
    utils.special[keys['ctrl']] = true
    utils.special[keys['alt']] = true
    utils.special[keys['delete']] = true

    utils.navigational[keys['upArrow']] = true
    utils.navigational[keys['downArrow']] = true
    utils.navigational[keys['leftArrow']] = true
    utils.navigational[keys['rightArrow']] = true

    let hasSelection = false
    let selection = window.getSelection()
    let isSpecial = utils.isSpecial(event)
    let isNavigational = utils.isNavigational(event)

    if (selection) {
        hasSelection = !!selection.toString()
    }

    if (isSpecial || isNavigational) {
        return true
    }
}

Editable Div:

<div
    tabIndex="0"
    contentEditable="true"
    suppressContentEditableWarning="false"
    onKeyDown={this.stopEditing} // This is the function
    onInput={this.onChangeHandler}
    onKeyPress={this.preventEnterKey}
/>

CodePudding user response：

this function ckeck if the pressed key is one from the list let

keys = {
        backspace: 8,
        shift: 16,
        ctrl: 17,
        alt: 18,
        delete: 46,
        leftArrow: 37,
        upArrow: 38,
        rightArrow: 39,
        downArrow: 40,
    }

There are three different keyboard events in JavaScript:

keydown: Keydown happens when the key is pressed down, and auto repeats if the key is pressed down for long.

keypress: This event is fired when an alphabetic, numeric, or punctuation key is pressed down.

keyup: Keyup happens when the key is released.

Update :

i think this function is for disable key event for keys that not found on this keys list but i think it need to return false in the last like this

stopEditing = (event) => {
    let keys = {
        backspace: 8,
        shift: 16,
        ctrl: 17,
        alt: 18,
        delete: 46,
        leftArrow: 37,
        upArrow: 38,
        rightArrow: 39,
        downArrow: 40,
    }

    let utils = {
        special: {},
        navigational: {},
        isSpecial(e) {
            return typeof this.special[e.keyCode] !== 'undefined'
        },
        isNavigational(e) {
            return typeof this.navigational[e.keyCode] !== 'undefined'
        },
    }

    utils.special[keys['backspace']] = true
    utils.special[keys['shift']] = true
    utils.special[keys['ctrl']] = true
    utils.special[keys['alt']] = true
    utils.special[keys['delete']] = true

    utils.navigational[keys['upArrow']] = true
    utils.navigational[keys['downArrow']] = true
    utils.navigational[keys['leftArrow']] = true
    utils.navigational[keys['rightArrow']] = true

    let hasSelection = false
    let selection = window.getSelection()
    let isSpecial = utils.isSpecial(event)
    let isNavigational = utils.isNavigational(event)

    if (selection) {
        hasSelection = !!selection.toString()
    }

    if (isSpecial || isNavigational) {
        return true
    }
    return false

}