Question

How do I handle shift + a key for uppercase or option?

a could be any key like 1 or ! / or ?

or

h or shift + h to get H with the uppercase.

I'm trying to build a WYSIWYG with Paper.js.

When I double click into a text item I want to be able to change the text. I have that working, but if I hit shift + a to get A I get shifta.

Was it helpful?

Solution

Characters such as !@#$%^&*()_+ etc. should be handled properly by onKeyDown. To handle uppercase letters, check to see if the shift-modifier is active:

function onKeyDown(event) {
    if (event.key == 'shift' || event.key == 'command' || event.key == 'option' || event.key == 'caps-lock' || event.key == 'control') return;
    if (event.modifiers.shift || event.modifiers.capsLock) {
        console.log('The ' + event.key.toUpperCase() + ' key was pressed!');
    }    
    else console.log('The ' + event.key + ' key was pressed!');
}

OTHER TIPS

function onKeyDown(event) {
    if (event.key == 'shift' || event.key == 'command' || event.key == 'option' || event.key == 'caps-lock' || event.key == 'control') return;


    if (event.modifiers.shift || event.modifiers.capsLock) {
        text.content = text.content + event.key.toUpperCase();
    }else if (Key.isDown('space')){
        event.preventDefault();
        text.content = text.content + " ";
    }else if (Key.isDown('backspace')){
        var subStr = text.content.substring(0, text.content.length - 1)
        text.content = subStr;
    }    
    else{
        text.content = text.content + event.key;
    } 
}

This is what I ended up with.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top