CODEWITHSUNDEEP
javascriptevent-handlingsynchronizationjquery-eventsjquery-1.8
Victor
Victor

Reputation: 8480

keyup and keydown are not synchronized?

I'm trying to build a complex WYSIWYG, and for this I want to create some actions after some keys are pressed.

For this I'm adding the jquery keypress and keyup listeners on a div with contenteditable. One of my actions make some changes on the HTML, and after this changes my cursor position should stay the same.

My problem that when I'm processing the keyup event, there is no relation between keyup and keydown.

The keyup events shouldn't be fired in a time relation.

If you start writing in the example bellow, you can see that there is no order between keydown and keyup.

If the key A was pressed after the key B the ´keyup` for A should be fired after the event for 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>

There is no way to synchronize these methods. In other words, when I'm processing keyup, keydown SHOULD wait.

Upvotes: 0

Views: 1047

Answers (2)

ohmu
ohmu

Reputation: 19752

Perhaps you want to keep some state information about which keys are currently being pressed down so that you can ignore any duplicate events until it is depressed. E.g.,

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...');

Upvotes: 0

Halcyon
Halcyon

Reputation: 57709

keyup and keydown are literally that. I can press and hold a, press b and then let go of a.

This will give you: keydown: a, keydown: b:, keyup: b, keyup: a.

You have to be able to deal with these events being 'out of order'.

Upvotes: 3

Related Questions