Capturing the charCode for CTRL (or any modifier/special key) + [any key] seems unclear

[benhowdle89]

I have a contentEditable element that I'm trying to capture key combos in, ie. CTRL + c.

Using onKeyPress doesn't seem possible because special keys aren't reported. onKeyDown also fails because you get one event for the CTRL key and one for the next key. I could check if ctrlKey is true, however that doesn't help me with obtaining the charCode for the key combo.

A JSBin demo of what I'm trying to achieve: http://jsbin.com/girusifiba/edit?html,js,console,output (type CTRL + c in the editable <div />)

Any advice on how to proceed would be appreciated!

[sophiebits]

I don't think you can reliably get charCode for non-keypress events. For keyboard shortcuts, you probably have to use keyCode. @salier might be able to say more, but I'm going to close this out because unfortunately, I don't think React can help you.

[benhowdle89]

Is there any advisable route to take to use native DOM events, ie. keypress within a React component? Just seems strange for React to remove this functionality (charCode for key combinations)...

[sophiebits]

You can always do

var node = React.findDOMNode(this);
node.addEventListener(...);

in a componentDidMount (and remove it in componentWillUnmount). I am fairly sure that charCode won't work across browsers though, so be sure to test.

[benhowdle89]

Thanks, shall do that for now! Seems a bit in limbo as charCode is deprecated, and KeyboardEvent.key hasn't got great browser support...

[sophiebits]

key is roughly equivalent to keyCode; it doesn't depend on keyboard layout like charCode does. If key would work for you, keyCode will too.

[benhowdle89]

Sure thing. For the moment, forgetting React exists, how would you go about capturing CTRL + c and getting the ASCII decimal code for those two keys (together)? Using keyPress + charCode, right? But if we're saying that charCode is unreliable, are we also saying that there's no modern, reliable way to get this ASCII value?

[benhowdle89]

Sorry if this has gone off-topic from React issues, it just seems strange to me that in 2015, we can't do this reliably in JS.

[sophiebits]

I'd listen to keydown and do

e.keyCode === 'C'.charCodeAt(0) && e.ctrlKey

which should also work in React.

[blainekasten]

Shameless plug, https://github.com/blainekasten/shortcut.js might help. With this you should be able to do something like:

componentDidMount() {
  shortcut('ctrl c', React.findDOMNode(this.refs.textarea)).bindsTo(this.ctrlCFn);
}

It's been a bit since i've used that library. But I plan on working on it more again soon to clean up some of it's code.

[Boorj]

Also there's a reactjs wrapper for Keypress.js : https://github.com/zzarcon/react-keypress

Here's a quote about how it works:

Lets say that you want to fire a function when the user press shift + enter + a:

  var React = require("react");
  var Keypress = require("react-keypress");

  React.createClass({
    sayHello() {
      alert("hello!");
    },

    render() {
      <div>
        <input type="text" onKeyPress={Keypress("shift enter a", this.sayHello)}/>
      </div>
    }
  });

But for myself i was looking for a solution without dependencies. So you can use conditions like if (ev.key ==='Enter' && ev.ctrlKey) . Also ev.keyCode gives a proper key number (don't know about exceptional cases, but suppose it has a workaround implemented anyway)