Keeping input focus while tapping on another DOM element


#1

I am trying to build an autocomplete input similar to the one Facebook has for selecting target users. My problem is that when the user clicks on one of the results in the autocomplete, the focus is lost and the keyboard is hidden as well. I would like to be able to set focus on the input again so that the user can continue to type for selecting another user. I have tried .focus() but it doesn’t really work. My goal is to create a website that is going to be used on mobile so I can’t use any plugins cordova might have to offer.

http://www.emposha.com/demo/fcbkcomplete_2/ - the functionality would be similar to this but without jQuery.


#2

I know this is an old topic, but I came across this same problem and found a fix, so I thought I’d post it for anyone else who happens to stumble upon this thread.

I have a button and an input box.
When you type in the input box, then tap the button next to it, the keyboard would disappear.
This code will prevent the keyboard from disappearing and let the user continue typing in the input box.

var clickedAddButton = false;
$('#textBox').blur(function() {
  if (clickedAddButton) {
    $('#textBox').focus();
    clickedAddButton = false;
  }
});
$('#addButton').click(function() {
  clickedAddButton = true;
});

I found the answer here:

Hope that helps