CODEWITHSUNDEEP
javascriptjqueryhtml
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42500

How to add keyboard event on `div` without contentEditable

I want to listen on ctrl + c key event on a div dom. I know I can add keypress event on the dom by setting its contentEditable to true (see below code). But it will make the div editable. What I want is to listen on ctrl + c event not make the div editable. Is there a way for me to do that?

$('.mydiv').attr('contentEditable', true);
$('.mydiv').focus();
$('.mydiv').bind('keypress', handler);

Upvotes: 0

Views: 332

Answers (2)

Alex
Alex

Reputation: 9041

If you add tabindex="0" to your <div> it will be able to get :focus without using contentEditable. You can then list for the ctrl + c like so:

var ctrlDown = false,
    ctrlKey = 17,
    cKey = 67;

$(document).keydown(function(e){
    if($('div').is(":focus")){
    if (e.keyCode == ctrlKey) ctrlDown = true;
    if (ctrlDown && e.keyCode == cKey){
        alert('dave');
        ctrlDown = false;
    }
  }
})

Check out this fiddle to see it working.

Upvotes: 0

Andriy
Andriy

Reputation: 15442

You can try this. Run this in your debugger on this current page:

document.querySelector('.post-taglist').oncopy = _ => alert('CCCCCCC')

enter image description here

it should make entire div (marked on screenshot with yellow color) listen to copy event (CTRL + C). Now you can click anywhere on the div (for example, where red circle is marked on the screenshot), than CTRL + C and you should get alert 'CCCCCCC'

Upvotes: 1

Related Questions