Changing input by changing element focus.

[infojes]

I have several input fields and I want to change the focus by code under certain conditions. For example if the first input has 6 characters it would jump to the second input field and change the maxlength to 4 characters for that input.

What I've tried is on the Input

$("#keyb-ord").keyup(function(){
    if ($("#keyb-ord").val().length === 6) {
        var keyboard=$('.manualkeyb').keyboard().getkeyboard();
        keyboard.accept(true);
        numkeyb('.manualkeyb','#popup-keyb',4); //This resets the keyboard for the new maxLength                           
    }
});

Thanks
Jody

[Mottie]

Hi Jody!

Instead of adding external code, try something like this (demo):

$('.keyboard1').keyboard({
    layout: 'qwerty',
    maxLength: 6,
    // tab to accept & go to next input; shift-enter for previous
    tabNavigation: true,
    // when input length = 6, go to next input
    change: function (e, keyboard, el) {
        if (keyboard.$preview.val().length >= 6) {
            // switchInput( goToNext, isAccepted );
            keyboard.switchInput(true, true);
        }
    }
});

$('.keyboard2').keyboard({
    layout: 'qwerty',
    maxLength: 6,
    // tab to accept & go to next input; shift-enter for previous
    tabNavigation: true,
    // set max length when keyboard becomes visible
    visible: function (e, keyboard, el) {
        // if other input had a value of length 6, set max to 4 here
        keyboard.options.maxLength = $('.keyboard1').val().length >= 6 ? 4 : 6;
    }
});

// activate the typing extension
$('.keyboard1, .keyboard2').addTyping({
    showTyping: true,
    delay: 50
});

[infojes]

That works great if the user uses your Virtual Keyboard, but what if they type it in with a regular keyboard?

[Mottie]

Try the demo using only the regular keyboard... it works either way.

[infojes]

You are right, must be something in my code.

Thank you very much!

[infojes]

It's got to do with me not using usePreview.

[Mottie]

Hmm, keyboard.$preview should be equivalent to keyboard.$el, if that is causing a problem, just change that within the code above.

[infojes]

Doesn't seem to be that. Just add usePreview : true, to your example and you'll see it doesn't work.

[Mottie]

I had to change the jQuery UI version... it wasn't positioning the keyboard properly.

Try this updated demo

[infojes]

Sorry I meant usePreview :False with the real keyboard doesn't work but it does work with the virtual one.

[Mottie]

Hmm, you're right... it's not switching the input properly. I'll try to look into this soon.

[Mottie]

Please try this demo to see if this issue has been fixed. The demo is pointing to the keyboard script in the working branch. I'll update the master branch once I get some of the other issues cleared up.

[infojes]

Looks like that fixed it.

Thanks

[infojes]

Found another issue and you can test it in your last demo on oct 1. If you type text in the first Input box directly with a regular keyboard and use your mouse and click on the second input box. The text we entered in the first box gets clear. If we click tab then it keeps it.

[Mottie]

Ok, this should be fixed in 1.19.0. Thanks for your patience!