키 업과 keydown이 동기화되지 않았습니까?

Question

복잡한 WYSIWYG를 빌드하려고하는데 일부 키를 누른 후에 일부 동작을 만들고 싶습니다.

이렇게하려면 div에 이라는 jquery keypress 및 keyup 수신기를 추가합니다. 내 행동 중 하나가 HTML을 약간 변경하고이 변경 후 커서 위치가 그대로 유지됩니다.

keyup 이벤트를 처리 할 때 keyup과 keydown 사이에는 아무런 관련이 없습니다.

keyup 이벤트는 시간 관계로해서는 안됩니다.

예를 작성하기 시작하면 keydown과 keyup 사이에 순서가 없음을 알 수 있습니다. 키 키 B 대한 'keyup` 후에 가압 한 경우

은 B의 이벤트 후 소성한다.

var result = document.getElementById('div-result'); 
 
function log(msg) { 
 
    result.innerHTML = result.innerHTML + '<br>' + msg; 
 
} 
 
$('#div-editable').keydown(function(e) { 
 
    log('down:&nbsp;' + e.keyCode); 
 
}); 
 
$('#div-editable').keyup(function(e) { 
 
    log('up:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + e.keyCode); 
 
}); 
 
log('Iniciando log...');

div#div-editable { 
 
    background: #F2F2F2; 
 
    padding: 10px; 
 
    border: solid 1px #333333; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
 
<div id="div-editable" contenteditable>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 

 
<div id="div-result"></div>

이러한 방법을 동기화하는 방법은 없습니다. 즉, 내가 처리 할 때 keyup, keydown은을 기다려야합니다.

Answer 1

keyup 및 keydown은 문자 그대로입니다. 을, 길게는 b을 누른 다음 을 놓으십시오.

keydown : a, keydown : b :, keyup : b, keyup : a.

이러한 이벤트는 의 'out of order'로 처리 할 수 ​​있어야합니다..

Answer 2

아마도 어떤 키가 눌려지고 있는지에 대한 상태 정보를 유지하기를 원할 때까지 어떤 중복 이벤트도 무시할 수 있습니다. 예 :

var result = document.getElementById('div-result'); 
var pressed_keys = {}; 

function log(msg) { 
    result.innerHTML = result.innerHTML + '<br>' + msg; 
} 

$('#div-editable').keydown(function(e) { 
    if (pressed_keys[e.keyCode]) { 
     // Currently pressed, ignore. 
     return; 
    } 

    // Mark key as pressed. 
    pressed_keys[e.keyCode] = true; 

    log('down:&nbsp;' + e.keyCode); 
}); 

$('#div-editable').keyup(function(e) { 
    log('up:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + e.keyCode); 

    // Mark key has depressed. 
    pressed_keys[e.keyCode] = false; 
}); 

log('Iniciando log...');