using multiple inputs and alwaysOpen, the mouse click is not working to select an input

[ghost]

When I try and get alwaysOpen working, with 2 input fields, I cannot select an input by clicking on it with the mouse. I have to hover over the input, and press a key on physical keyboard. Whenever I try to enter a key using virtual keyboard, the input which last had text entered to it, gets the focus.

So I am trying to alternate between input fields, without using tab navigation, or a next/previous button. I simply want the user to click on the input field they wish to enter text.

To fix the problem in the given example, simply remove alwaysOpen, and it works fine. Its only when alwaysOpen:true is added, that there is this problem.

http://jsfiddle.net/u737hzv4/7/

[Mottie]

Hi @somersbar!

Since you have the lockInput set, it makes the input "readonly". So I think the easiest solution would be to add the {prev} and {next} keys and define a new switch input (since the built-in one doesn't seem to behave as expected) (demo)

CSS

.ui-keyboard-space {
  width: 10em;
}

$('.keyboard').keyboard({
  layout: 'custom',
  usePreview: false,
  autoAccept: true,
  autoAcceptOnEsc: true,
  stayOpen: true,
  alwaysOpen: true,
  caretToEnd: true,
  lockInput: true,
  display: {
    'next': '\u21e8',
    'prev': '\u21e6',
  },
  switchInput: function() {
    var $kb = $('.ui-keyboard-input-current');
    $kb.data('keyboard').accept();
    // using siblings since there are only two inputs
    $kb.siblings().data('keyboard').reveal();
  },
  customLayout: {
    'default': [
      '1 2 3 4 5 6 7 8 9 0',
      'a b c d e f g h i j',
      'k l m n o p q r s t',
      '{tab} u v w x y z , .',
      '{shift} {space} {prev} {next} {bksp}'
    ],
    'shift': [
      '1 2 3 4 5 6 7 8 9 0',
      'A B C D E F G H I J',
      'K L M N O P Q R S T',
      '{tab} U V W X Y Z , .',
      '{shift} {space} {prev} {next} {bksp}'
    ]
  }
});

[Mottie]

Also, if you don't want the password input focused initially, set the initialFocus option to false, then use the initialized callback to target the username input:

initialFocus: false,
initialized: function(e, keyboard, el) {
  if (el.id === "username") {
    keyboard.reveal();
  }
}

[ghost]

Ok but if I remove the lockInput feature, the problem still persists. I only added the lockInput feature to stop the onscreen keyboard popping up.

Thanks for getting back to me anyway. I think I will just turn off the alwaysOpen feature. Thanks for the tip on initalFocus.

[Mottie]

Oh ok, I see the problem.... it looks like the first input/keyboard aren't getting the focus class names as expected. I'll investigate this problem more.

[Mottie]

Ok, try that fix... I'll push a new release later today if it works for you.

[ghost]

Its still the same, after adding that if statement into the jquery.keyboard.js file. The textbox which is clicked on, loses focus, as soon as you click or even hover over the virtual keyboard.

[Mottie]

Try this demo... it is pointing to the jquery.keyboard.js file in the master branch.

I also ended up including a setTimeout to give the username input focus on initialization... I'll need to look into the need for a delay there too.

[ghost]

That works perfectly! Thank you very much for your help.

[ghost]

there is though, for some reason a bug in IE. When you open that jsfiddle in IE, the first input is highlighted, but the caret appears in the second input field. (though as soon as you type, the caret goes to the first input). Its fine however in Opera and Chrome.

[Mottie]

Ok, I'll look into that when I get some free time today.

[Mottie]

Sorry! I totally forgot about this issue, so I haven't worked on it. I'll be sure to look into this problem for the next release.

[hero9]

@Mottie Did you have time to solve this issue?