Change focus when input field was equal with maxlength

[rofifathurrohman]

i will make input automaticly change focus to next input if input field was equal with maxlength, the input field has been integrated with Mottie Keyboard, it's possible to do that?

Here's DEMO : JSFIDDLE

If no use Virtual Keyboard it's easy use this code:

$("input").bind("input", function() {
        var $this = $(this);
        setTimeout(function() {
            if ( $this.val().length >= parseInt($this.attr("maxlength"),10) )
                $this.next("input").focus();
        },0);
    });

when i combine script above with Mottie Keyboard, it's doesn't work.

Sorry for my bad english, Thanks!

[Mottie]

Hi @rofifathurrohman!

If you look at the wiki page, you'll see this demo listed as "Enter a serial number in sequence".

Interestingly enough, I was just helping someone through email and we came up with this demo

$(function() {
  $("input").keyboard({
    position: {
      // position under center input
      of: $("input:eq(1)"),
      // move down 12px; not sure why it doesn't line up
      my: 'center top+12',
      at: 'center top'
    },
    enterNavigation: true,
    maxLength: 4,
    layout: 'num',
    autoAccept: true,
    usePreview: false,
    change: function(e, keyboard, el) {
      var len = keyboard.$el.hasClass("last") ? 4 : 3;
      if (keyboard.$el.val().length >= len) {
        // switchInput( goToNext, isAccepted );
        keyboard.switchInput(true, true);
      } else if (keyboard.$el.val() === "" && keyboard.last.key === "bksp") {
        // go to previous if user hits backspace on an empty input
        keyboard.switchInput(false, true);
      }
    }
  });
});

[rofifathurrohman]

it's work, but if use alwaysOpen function doesn't work?

[Mottie]

When you set alwaysOpen the focus ends up on the last input.

I set the initialFocus option to false, but it didn't work for some reason. Adding focus to the first input after a delay also didn't work. I will need to investigate.

[rofifathurrohman]

okee, I'll wait for the sequel

[Mottie]

Hi @rofifathurrohman!

Sorry for taking so long! I finally fixed this problem!

Here is an updated demo: https://jsfiddle.net/Mottie/bwpc31nj/10/

Make sure to set:

• initialFocus to false.
• Add "keyboard-init-focus" class name to the first input. You can change this class. Use $.keyboard.css.initialFocus = "keyboard-init-focus"; to alter the class name.