Question

我想在输入内部触发一个事件按下contenteditable div，同时避免默认输入行为（创建新行）并保持箭头同时运行。

无论我尝试什么，都可以禁用Enter并且箭头键功能正常，反之亦然。

要抓住一类可信的div - .a - 同时保持文档中其他所有内容的箭头键被禁用。

$(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();
    });
});

自定义输入和默认箭头同时按下contenteditable div中的事件？

1 个答案: