自定义Enter和默认箭头键同时在可满足的div中按下事件

Question

我想在可满足内容的div内触发Enter键事件，同时避免默认的Enter行为(创建新行)并同时保持箭头功能

无论我尝试什么，要么输入是禁用的，箭头键功能，反之亦然。

问题是要在一类可满足内容的div (.a)中实现这一点，同时在文档中的其他所有内容中禁用箭头键。

http://jsfiddle.net/opr2ouzo/

$(document).on('keydown',function(e){ //disables keys
    console.log(this, e.target);
    var key = e.charCode || e.keyCode;
    if(key == 13 || key == 32 || key == 33 || key == 34 || key == 35 || key == 36 || key == 37 || key == 38 || key == 39 || key == 40 ) {
        e.preventDefault();
    } else {};
});
$('.a').on('keydown', function(e) { //enables arrows for this class
  e.stopPropagation(); 
  var key = e.charCode || e.keyCode;
    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();
    }
    else if( next_text.textContent.length === 0,1 && key == 13 || key == 32 || key == 33 || key == 34 || key == 35 || key == 36 ){
        e.preventDefault();
    }
});
function checkPosition(){};
kd.run(function () { //fires keydrown plugin
    kd.tick();
});
$('.a').on('mouseenter', function(){ //css change as example event on Enter press while the caret is in this class
    kd.ENTER.press(function(){
        $('.bg').css('background','skyblue');
        console.log();
    });
});

这是关于这个功能的整个管道

Answer 1

修复实际上很简单，要么修改像这样的代码-删除document部分，编辑选择器并为每个类单独定制键事件-要么在多个按键事件的更复杂的情况下-保留document部分并禁用仅在.a中未禁用或由按键事件成功覆盖的那些键。此外，自定义按键事件应该在a部分中手动解除绑定。

http://jsfiddle.net/opr2ouzo/2/

$('.a, .b').on('keydown', function(e) {
  var key = e.charCode || e.keyCode;
    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();
    }
    else if( next_text.textContent.length === 0,1 && key == 13 || key == 32 || key == 33 || key == 34 || key == 35 || key == 36 ){
        e.preventDefault();
    }
});
function checkPosition(){};
kd.run(function () {
    kd.tick();
});
$('.a').on('mouseenter', function(){
    kd.ENTER.press(function(){
        $('.bg').css('background','skyblue');
        console.log();
    });
});