keyDown event overrides paste event

Question

Since I'm using canvas to render typed text and need to use other key events like backspace, forward delete, tab and arrow keys, I need compatibility between browsers and using the keypress and keydown events. When attempting to use the paste event, the keydown event takes priority and cancels the paste event from ever happening.

A related question, but does not solve my issue since I want to keep both the keydown and keypress events keypress and keydown take priority over paste event in Firefox & Safari

My event listeners:

window.addEventListener('paste', pasteText);
window.addEventListener("keypress", keyPressHandler, true);
window.addEventListener("keydown", keyDownHandler, true);

function pasteText (event) {
console.log('paste');
    if(selectedLine !== ''){

        var clipboardData, pastedData;

        event.stopPropagation();
        event.preventDefault();

        clipboardData = event.clipboardData || window.clipboardData;
        pastedData = clipboardData.getData('Text');

    }   

}

function keyPressHandler(event){

    if(selectedLine != '' && 
    $(".sp-input").is(":focus") === false && 
    $("input").is(":focus") === false){

        var key = event.keyCode;

        if (key == 13){ // Enter key

            gotoNextLineOrDeselect();                           

        }else if (key == 115 && (event.ctrlKey||event.metaKey)|| (key == 19)) {
            // this will be for modifier keys like ctrl, option and command

            event.preventDefault();
            // do stuff
        }else if(key !== 8 &&
                 key !== 9 &&  
                 key !== 37 && 
                 key !== 38 &&
                 key !== 39 && 
                 key !== 40 &&
                 key !== 46){

            key = event.charCode;

            addletter(String.fromCharCode(key));
            event.preventDefault();

        }

    }

}

function keyDownHandler(event){

    if(selectedLine != '' && 
    $(".sp-input").is(":focus") === false){

        var key = event.keyCode;
        switch(key){

            case 8:
                backspace();
                break;

            case 9: // tab

                var nextLine;

                if(selectedLine === 'line1' && lineBlankOrWhitespace('line2') === false){

                    nextLine = 'line2';

                }else if(selectedLine === 'line2' && lineBlankOrWhitespace('line3') === false){

                    nextLine = 'line3';

                }else if(selectedLine === 'line2' & lineBlankOrWhitespace('line3') || 
                         selectedLine === 'line3'){

                    nextLine = 'line1';

                }else return;



                selectLine(nextLine, false);


                textInsertIndex = textLines[selectedLine].keyHistory.length;

                setCaretXPosWithTextInsertIndex(selectedLine, 0);

                renderScreen();  

                event.preventDefault();                 

                break;

            case 37: // left arrow
                arrowOver(-1);

                event.preventDefault();
                break;

            case 39: // right arrow
                arrowOver(1);

                event.preventDefault();
                break;

            case 38: // up arrow
                var prevLine = selectedLine === 'line3' ? 'line2' : 'line1';
                if(selectedLine !== 'line1'){

                    selectLine(prevLine, false);

                    textInsertIndex = textLines[selectedLine].keyHistory.length;

                }else{

                    textInsertIndex = 0;

                }

                setCaretXPosWithTextInsertIndex(selectedLine, 0);

                renderScreen(); 

                event.preventDefault();

                break;

            case 40: // down arrow
                var nextLine = selectedLine === 'line1' ? 'line2' : 'line3';
                if(lineBlankOrWhitespace(nextLine) === false && 
                   selectedLine !== 'line3'){

                    selectLine(nextLine, false);

                }

                textInsertIndex = textLines[selectedLine].keyHistory.length;

                setCaretXPosWithTextInsertIndex(selectedLine, 0);

                renderScreen();  

                event.preventDefault();

                break;

            case 46: // forward delete key

                forwardDelete();

                break;

        }

    }

}

When pasting, is there a way to prevent the keypress and keydown events from being triggered?

It would help a lot if you'd post the *code* for your event handlers, as that could very well be where the problem lies. — Pointy, Aug 23 '17 at 17:15
espascarello, if preventDefault is the solution, where would I put it? I tried at the beginning of my paste event, but does not do anything: event.preventDefault(); — Chewie The Chorkie, Aug 23 '17 at 18:02

score 5 · Answer 1 · answered Aug 23 '17 at 18:15

Here's the answer: I need to preventDefault if it exists. Then I need to check for the modifier keys on the other key events and return false if they are pressed.

function pasteText (event) {

    if (event.preventDefault())
        event.preventDefault();

    console.log('paste');

}

function keyPressHandler(event){

    if (event.ctrlKey||event.metaKey) {
        return false;
    }

}

function keyDownHandler(event){

    if (event.ctrlKey||event.metaKey) {
        return false;
    }

}

keyDown event overrides paste event

1 Answers1