Stop unwanted scrolling when moving caret with arrow keys in contenteditable div

Question

Keydown works perfectly when I select document, *, body or any particular element.

But when I add .not('.some-class'), keydown works like this .not() doesn't even exist. Maybe because of the way keydown affects children elements, but I'm not sure:

$('*').not('.some-class').on('keydown',function(e){ 
    var key = e.charCode || e.keyCode;
    if(key == 33 || key == 34 || key == 35 || key == 36 || key == 37 || key == 38 || key == 39 || key == 40 ) {
        e.preventDefault();
    } else {}
});

How to disable these keys for the whole document except for 1 child class?

edit: http://jsfiddle.net/umL139xw/2/

How to stop this unwanted scrolling while keeping ability to move caret with arrows?

edit2: complete solution thanks to Jason P and Kaiido

http://jsfiddle.net/umL139xw/5/

Try `$('*:not(.some-class)')` – Gofilord Aug 12 '14 at 17:30 — Gofilord, Aug 12 '14 at 17:30

score 1 · Answer 1 · answered Aug 12 '14 at 17:31

1

Events bubble (well, a good number of them do). That means they fire on the target of the event, then on every element up the DOM tree, so even if you don't bind the handler to .some-class, it will fire for that element's ancestors. Also, binding an event handler to * is generally not a good idea. Maybe something like this would work for you?

http://jsfiddle.net/j3wqpdow/

$(document).on('keydown',function(e){ 
    console.log(this, e.target);
});

$('.some-class').on('keydown', function(e) {
   e.stopPropagation(); 
});

answered Aug 12 '14 at 17:31

Jason P

26,984
3
31
45

this works in the fiddle. however, keys still affect the page (scrolling). how to prevent this? – astx123 Aug 12 '14 at 17:42
Can you create a fiddle that demonstrates the issue? – Jason P Aug 12 '14 at 17:43
1

here it is - http://jsfiddle.net/umL139xw/1/ works, but that scrolling problem I want to remove remains. maybe I should reformulate the question. edit: hold right arrow. – astx123 Aug 12 '14 at 17:51
Chrome won't scroll the page, however in Firefox, with B (using stopPropagation), it will scroll the page when the end of the text is reached. – Xander Luciano May 01 '17 at 13:52

score 1 · Accepted Answer · edited May 23 '17 at 11:33

You could use the cursor's position detector from this answer and then preventDefault() only when you're at the end.

$(document).on('keydown',function(e){
    console.log(this, e.target);
    var key = e.charCode || e.keyCode;
    if(key == 16 || key == 32 || key == 33 || key == 34 || key == 35 || key == 36 || key == 37 || key == 38 || key == 39 || key == 40 ) {
        e.preventDefault();
    } else {}
});
$('.b').on('keydown', function(e) {
  e.stopPropagation(); 
  var key = e.charCode || e.keyCode;
   //Above part comes from https://stackoverflow.com/questions/7451468/contenteditable-div-how-can-i-determine-if-the-cursor-is-at-the-start-or-end-o/7478420#7478420
    range = window.getSelection().getRangeAt(0)
    post_range = document.createRange();
    post_range.selectNodeContents(this);
    post_range.setStart(range.endContainer, range.endOffset);
    next_text = post_range.cloneContents();

    if( next_text.textContent.length === 0 && key == 39 ){
        e.preventDefault();
    }
});

Working fiddle

fantastic! if anybody wonders how to disable key, for ex. page up, regardless of the position, just do this: `if( next_text.textContent.length === 0,1 && key == 34 )` — astx123, Aug 12 '14 at 18:53

Stop unwanted scrolling when moving caret with arrow keys in contenteditable div

2 Answers2