Simulate virtual key press

[jwarder]

Hi,

I would like to tab between text input boxes after validation, similar to entering a serial number into Windows activation, I have managed to do this but only with overriding the accept key e.g.

$.keyboard.keyaction.accept = function(base){
    var type = base.el.attributes[0].nodeValue;
    if (type == "text") {
        base.accept();      // accept the content
    } else if (type == "ticketReference") {
        base.switchInput(!base.shiftActive, true);
    }
};

I have several text input boxes and would like to tab between each one when the validate method return true, not relying on the user pressing a key, I have tried the following but can't get it to work

This is I have so far,

validate: function(keyboard, value, isClosing){
    var valid = /^\S{3}$/g.test(value);     
    if (valid) {
        keyboard.accept();
    }
    return valid;
},

Thanks

[Mottie]

Hi @jwarder!

It's not perfect, but here is a working demo:

HTML

<div id="wrap">
    <input class="serial" type="text" />
    <input class="serial" type="text" />
    <input class="serial" type="text" />
    <input class="serial" type="text" />
    <input class="serial last" type="text" />
</div>

Script

$(function () {

    $('.serial').keyboard({
        layout: 'qwerty',
        usePreview: false,
        autoAccept: true,
        // restrictInput: true,
        acceptValid: true,
        tabNavigation: true,
        maxLength: 3,
        position: {
            of: $('#wrap')
        },

        change: function (e, keyboard, el) {
            // check valid again, because checkValid() is called
            // ~100ms after the change event =(
            keyboard.checkValid();
            if (keyboard.isValid && keyboard.$el.hasClass('last')) {
                setTimeout(function () {
                    keyboard.close(true); // accept the content
                }, 100);
            } else if (keyboard.isValid) {
                // set time out needed to finish up change event and run checkCombos &
                // checkValid after a set time (see issue #102)
                setTimeout(function () {
                    if (keyboard.isValid) {
                        keyboard.switchInput(true, true);
                    }
                }, 100);
                return false;
            }
        },

        validate: function (keyboard, value, isClosing) {
            var valid = /^\S{3}$/g.test(value);
            keyboard.isValid = valid;
            return valid;
        }

    });

});

The main issue is that the validate check is actually done after the change event. This is due to a delay in the code (see issue #102) which throttles the combination checker. The 100ms delay might be a bit excessive (both in the plugin and the code above).

That's why there is another validate check within the change function above, and the 100ms delays to either close the keyboard or switch to the next input.

[Mottie]

After messing around a bit more, I think it might be nice to include this in the code:

visible: function(e, keyboard, el){
    el.select();
},

Then when you click in a previous input, all of the content is selected and ready for replacement - demo.

[jwarder]

Thanks very much, I've been struggling with that one.

I do have one more question... If I have say four input boxes, the first three have a maximum length of 4, and the last one has a maximum length of 3, do I need to create two keyboard instances to handle this? Because that is what I'm doing at the moment, and I'm pretty sure there is a better way of doing it?

Thanks

[Mottie]

Sadly, yes, you'll need to make two instances because the maxLength and validate options will be different.

Actually the way the keyboard works now, it makes an instance for each input. I know that's not the most efficient method, and someday when I have time I'll fix it.

[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 this discussion.