1

I have an event handler that is executed when an option in a selectbox is clicked. 

$('#my-select').live('change', function(evt) {
    ....
});

Is there a way to pass the status of the Ctrl-key (pressed/not pressed) into the event handler ? evt does not contain this information because all key related attributes are undefined.

chessweb
  • 4,613
  • 5
  • 27
  • 32
  • 1
    The change event only triggers on changes in the value on blur, and as such has no concept of keys, you'll have to use keyup, keydown, keypress etc for that. And live() is removed in newer versions of jQuery. – adeneo Apr 07 '13 at 00:08
  • do you want to implement multi-select drop down ? if that is the case, there are ready made plugins that will do that for you – Muhammad Omar ElShourbagy Apr 07 '13 at 00:10
  • I just wanted to note that `CTRL` + click opens the context menus on Mac by default. If your site targets Mac users as well, I would not do anything with `CTRL` and click. – Felix Kling Apr 07 '13 at 00:11
  • @adeneo: But `select` inputs raise the event on (after) click... – Felix Kling Apr 07 '13 at 00:12
  • For 'click' events, modifier key status is automatically available without passing anything else. Just test `event.ctrlKey`, `event.altKey`, `event.shiftKey`. If they are not available for 'change' events, then they are not available. – Beetroot-Beetroot Apr 07 '13 at 00:12
  • @Beetroot-Beetroot - Did a test ([**fiddle**](http://jsfiddle.net/9ggN8/)), and you're right, they are always present in the event, but they always return "undefined", at least they do in my browser. – adeneo Apr 07 '13 at 00:17
  • @FelixKling - dyslexia or something, did'nt notice that it was a select! – adeneo Apr 07 '13 at 00:18
  • **[This](http://jsfiddle.net/wKdHC/1/)** is the closest I can manage, though it will only detect modifiers pressed at the time the select menu is expanded, not when an item is selected or changed with arrow keys (same behaviour in Opera, Chrome and IE). – Beetroot-Beetroot Apr 07 '13 at 02:10

1 Answers1

0

change event and the keys used to enter the value

The change event is not something that has keys associated. Please read jQuery's .change() documentation:

The change event is sent to an element when its value changes. This event is limited to elements, boxes and elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.

The example is this:

  1. You have some input field.
  2. You enter "some name" text into the field.
  3. Before going to some other field, you decide to change it to "some test", eg. by hitting backspace couple times, then you navigate to next field (eg. by using Tab key, or by tapping Next on iOS keyboard etc.),
  4. The onchange event handler is fired, when you navigate to other field (or rather, as soon as the field loses focus), so the information about all keys used to enter value are pretty unrelated.

Solution using keypress event

To solve that problem, you would need to implement your solution using keypress event, eg. thanks to jQuery's .keypress() function. In such case, event object's ctrlKey attribute (listed eg. here) lets you know about the status of the Ctrl key. Example usage is here: https://stackoverflow.com/a/4604093/548696

Demo for saving keys on keypress/keydown/keyup and reading on change

It is available here:

http://jsfiddle.net/tadeck/vPu94/

The demo clears the recorded keys on focus, saves them on every keypress event (you can easily edit that and test different cases) and reads them (and outputs on the screen) whenever change event is fired (so when the changed field leaves focus).

Community
  • 1
  • 1
Tadeck
  • 132,510
  • 28
  • 152
  • 198
  • It's hard to see how that might help in this case. Can you code up a demo please Tadeck. – Beetroot-Beetroot Apr 07 '13 at 01:22
  • @Beetroot-Beetroot: Well, the basic idea is simple: `onchange` does not know the keys that were used to enter the value, while `onkeypress` knows it. So, you need to gather proper information using `onkeypress` and then read it when `onchange` is invoked. You can use jQuery's `.data()` to handle saving (on key press) and reading (on change) data associated with specific input. The rest is in fact the real part of the application, and depends on your specific needs (eg. how backspace is handled). – Tadeck Apr 07 '13 at 02:21
  • @Beetroot-Beetroot: I have added link to demo. – Tadeck Apr 07 '13 at 02:46
  • Tadeck, please forgive me if I'm wrong but I don't think that's what the OP wants. Your fiddle has a text `` not a ` – Beetroot-Beetroot Apr 07 '13 at 05:27
  • Nice idea, Tadeck, I think I can adapt it to my specific use case with the – chessweb Apr 07 '13 at 09:37