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;

4 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
  3. Really informative article.Really looking forward to read more. Really Cool.

    เว็บไซต์คาสิโนออนไลน์ที่ได้คุณภาพอับดับ 1 ของประเทศ
    เป็นเว็บไซต์การพนันออนไลน์ที่มีคนมา Gclub Royal1688
    และยังมีหวยให้คุณได้เล่น สมัครหวยออนไลน์ ได้เลย
    สมัครสล็อตออนไลน์ได้ที่นี่ >>> Golden slot
    ร่วมลงทุนสมัครเอเย่น Gclubกับทีมงานของเราได้เลย

    ReplyDelete
  4. Im grateful for the blog post.Really thank you!
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร Gclub กับทางทีมงานของเราเพียงเท่านั้นร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> goldenslot
    สนใจร่วมลงทุนกับเรา สมัครเอเย่น Gclub คลิ๊กได้เลย

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts