These key combinations are commonly knows as Copy (Ctrl + C), Paste (Ctrl + V), Save (Ctrl + S).  In MAC OS these combinations are know as Copy (Cmd + C), Paste (Ctrl + V), Save (Ctrl + S).

To Run Example Code

execute below commands
npm install
npm start
now open index.html in browser

Program

Here handleKeydown function which detects the key combination
import React from 'react'

class ExampleApplication extends React.Component {

  constructor(props) {
    super(props);
    this.handleKeyDown = this.handleKeyDown.bind(this);
  }

  handleKeyDown(event) {
    let charCode = String.fromCharCode(event.which).toLowerCase();
    if(event.ctrlKey && charCode === 'c') {
      console.log("Ctrl + C pressed");
    } else if(event.ctrlKey && charCode === 'v') {
      console.log("Ctrl + V pressed");
    } else if(event.ctrlKey && charCode === 's') {
      event.preventDefault();
      console.log("Ctrl + S pressed");
    }

    // For MAC we can use metaKey to detect cmd key

    if(event.metaKey && charCode === 'c') {
      console.log("Cmd + C pressed");
    } else if(event.metaKey && charCode === 'v') {
      console.log("Cmd + V pressed");
    } else if(event.metaKey && charCode === 's') {
      event.preventDefault();
      console.log("Cmd + S pressed");
    }
  }

  render() {
    return (
      <div>
         <h4>do Ctrl+C or Ctrl+V or Ctrl+S in below DIV</h4>
         <div onKeyDown={this.handleKeyDown}  contentEditable={true}>
            This is content editable text
         </div><br/><br/>
         see console for output
      </div>
    );
  }

}

ExampleApplication.propTypes = {
}

ExampleApplication.defaultProps = {
}

export default ExampleApplication;

2 comments:

  1. And I thought control C, control V etc. are already shortcuts in my book. There are still other methods to do it better. Who doesn't want to make its work as easy/automatic as possible, almost everybody does. Now if only it is easy to locate a legit essay writing service too.

    ReplyDelete
  2. Pretty handy! this also works for printing using ctrl+p/cmd+p on top of it I implemented google analytics to track :) Thanks much!!

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts