0

I am using jquery-tokeninput.

On mobile devices, when trying to add a token, a keyboard should open up, but the keyboard only opens when touching/clicking/focusing on $(".token-input-input-token-facebook") and not on $(".token-input-list-facebook") (using the Facebook theme).

I have tried doing:

$(".token-input-list-facebook").live('click', function(e){
  e.preventDefault();
 $(".token-input-input-token-facebook").focus();
});

but that didn't work (along with other variants).

The html is:

<ul class="token-input-list-facebook">
<li class="token-input-input-token-facebook">
<input type="text" autocomplete="off" id="token-input-change_tags" style="outline: none; width: 30px;">
<tester style="position: absolute; top: -9999px; left: -9999px; width: auto; font-size: 14px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; letter-spacing: 0px; white-space: nowrap;">
</tester>
</li>
</ul>

Is there a solution for this?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Nick Ginanto
  • 31,090
  • 47
  • 134
  • 244

1 Answers1

0

I recently ran into a very similar issue. I wanted to ask, Are you you using fastclick by chance?

FastClick and tokeninput do not seem to play well together.

I disabled FastClick on all of the tokeninput fields, and it seemed to be much happier.

I did this with the facebook theme by manually creating a class list like this : 

   settings = 
    classes :  
      tokenList: "token-input-list-facebook needsclick",
      token: "token-input-token-facebook needsclick",
      tokenReadOnly: "token-input-token-readonly-facebook needsclick",
      tokenDelete: "token-input-delete-token-facebook needsclick",
      selectedToken: "token-input-selected-token-facebook needsclick",
      highlightedToken: "token-input-highlighted-token-facebook needsclick",
      dropdown: "token-input-dropdown-facebook needsclick",
      dropdownItem: "token-input-dropdown-item-facebook needsclick",
      dropdownItem2: "token-input-dropdown-item2-facebook needsclick",
      selectedDropdownItem: "token-input-selected-dropdown-item-facebook needsclick",
      inputToken: "token-input-input-token-facebook needsclick",
      focused: "token-input-focused-facebook needsclick",
      disabled: "token-input-disabled-facebook needsclick"

This told FastClick to ignore all token input behavior and led to select and editing to work as expected.

haagmm
  • 583
  • 6
  • 10