How to get the value of only the previous key?

[knod]

I'm trying to get the value of the key that was just activated. keyboard.last.key only gives me the literal text value that appears on the visual keyboard (e.g. 'Enter'), and keyboard.last.val gives me the whole contents of the preview box. What property will just give me the value of just the last key pressed?

Right now what I'm doing is storing the previous .end and using that to get a substring of .val:

// Elsewhere:
var prevEndIndx = 0;

// Inside the keyboard instantiation:
change: function(evnt, keyboard, elem) {

    var last = keyboard.last;
    var newInput = last.val.substring( prevEndIndx, last.end )
    prevEndIndx = last.end;

},

I tried to use keyboard.last.start and keyboard.last.end and use those values to extract the data from keyboard.last.val, but .start and .end currently appear to be the same as each other, no matter the length of the input that the key contains.

I also tried resetting .val to an empty string at the end of the change callback to isolate any new input, but it's obviously getting its orders from somewhere else because the data of the prieview window just kept coming back.

I've read some of the closed issue backlogs, but I haven't seen anything relevant yet. There must be a simpler way to do it, but so far I haven't found anything.

[Mottie]

Hi @knod!

The keyboard.last value hasn't really been thoroughly documented, but I'll break it down for you:

• start & end - caret position; the only time these values are different from each other is when text is selected inside the input/textarea.
• $key contains the jQuery object of the last key pressed (empty array if physical keyboard was used). So you could use this to get any of the data-attributes from the virtual keyboard.
• val - last "complete" input value.
• event - last keyboard event - sadly, because you're using the virtual keybard, the event.which & event.keyCode won't be accurate.
• virtual - boolean; if true, the virtual keyboard caused the change event. If false the physical keyboard caused the change event.

If you are wanting the keyCode, then try this (demo):

$('#keyboard').keyboard({
    change: function (evnt, keyboard, elem) {
        var key,
            lastKey = keyboard.last.key || '',
            keyCode = lastKey.charCodeAt(0),
            xref = {
                'Bksp' : 8,
                'Tab'  : 9,
                'Enter': 13,
                'Shift': 16,
                'Space': 32,
                'Del'  : 46
            };
        if ( lastKey in xref ) {
            // enter => 13
            keyCode = xref[ lastKey ];
        }
        console.log(lastKey, '=>', keyCode);
    }
});

[knod]

@Mottie: Thanks for the reply!

I'm not sure what you meant by 'last "complete" input value', so for my clarification - val, from what I've seen, seems to be the value of everything currently in the preview field, not just the last key that was activated. Is that correct?

The method you showed was interesting for fetching the keycode of a single key, but I'm making a keyboard that enters whole words, so I'm not looking for the keyCode of one key. I need to be able to detect the actual values (i.e. not the name of the key, or just what is displayed on the keyboard) of whatever key I just pressed.

I need those values so I can insert them into the Ace editor we discussed in #306. The method I currently use (that you can see in the demo) works fine, even for keys like 'Enter', I just thought there might be a built in way to get the value I'm looking for. Does that clarify my question a bit?

[Mottie]

Hmm, why can't you use last.key then? It contains what is actually inserted into the keyboard, unless it is a backspace or other action key.

Also, you could use something like last.$key.attr('data-value') or use data-action if it's an action key.

[knod]

I guess the problem is that action keys need to be dealt with differently and that's not ideal for what I'm trying to do. It just creates more complicated code.

What I want to be able to do is retrieve the last value sent to the input field (which is sometimes no value at all). There's an idea that could simplify this a lot for me and I've been looking through the code. I haven't yet parsed enough to understand what I want to try next – how do I clear the last.val value to an empty string after every change. When I set last.val to something, it's immediately reset to what it was before. Where is that data being stored and how can I affect it? Alternatively, how can I call or trigger acceptance of the input manually so that last.val will be cleared for me.

Also, do you have a gitter channel or an irc channel where we could talk real time?

[knod]

I've found the key to resetting last.val here: https://github.com/Mottie/Keyboard/blob/master/js/jquery.keyboard.js#L1276 (base.$preview.val())

Apparently last.val is getting its value from the .val of the preview field. Once I found that base is apparently keyboard, I just called keyboard.$preview.val( '' ) inside my change event, and that reset last.val to an empty string. Should be a snap to just pick up the input I need from last.val now!

(Edit: a part of the solution from issue #401 may have also worked, but I'm ok with mine for the moment)

[Mottie]

Hmm, I didn't think that would work... does the backspace and delete still work?

[knod]

The backspace key is still treated as a special case unfortunately. Not
sure how I can change that because it doesn't put any kind of value into
the output field as far as I know.

[Mottie]

I added last.preVal which "should" contain the input's previous value... I haven't thoroughly tested it and I only added it for informational purposes - meaning, it isn't being used anywhere.

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue the discussion in this thread.