我想在输入内部触发一个事件按下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();
});
});
以下是有关此功能的整个管道。
答案 0 :(得分:0)
修复实际上非常简单,要么修改代码就像这个小提琴一样 - 删除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();
});
});