jquery focus() not working in mobile(android), phonegap-cordova

3
votes

i am new to jquery please do help! it is working fine in web but not working in mobile.

$(document).on('click', 'label', function(){

    if (!$(this).next('input').is(':checked')) {

        $('input[data-cat-qty="' + $(this).next('input').attr('data-cat') + '"]').textinput("enable");
        $('input[data-cat-qty="' + $(this).next('input').attr('data-cat') + '"]').slider("enable");
        $('input[data-cat-qty="' + $(this).next('input').attr('data-cat') + '"]').focus();

    } else {

        $('input[data-cat-qty="' + $(this).next('input').attr('data-cat') + '"]').textinput("disable");
        $('input[data-cat-qty="' + $(this).next('input').attr('data-cat') + '"]').slider("disable");

    }

});
2
androidjquerycordovajquery-mobilephonegap-build

2 Answers

3
votes

I found the solution for that, I used "touchstart" instead of "click" it worked.

$(document).on('touchstart', 'label', function(){

if (!$(this).next('input').is(':checked')) {

    $('input[data-cat-qty="' + $(this).next('input').attr('data-cat') + '"]').textinput("enable");
    $('input[data-cat-qty="' + $(this).next('input').attr('data-cat') + '"]').slider("enable");
    $('input[data-cat-qty="' + $(this).next('input').attr('data-cat') + '"]').focus();

} else {

    $('input[data-cat-qty="' + $(this).next('input').attr('data-cat') + '"]').textinput("disable");
    $('input[data-cat-qty="' + $(this).next('input').attr('data-cat') + '"]').slider("disable");

}

});
1
votes

I'm pretty sure that iOS and Android doesn't allow you to trigger focus on an input, unless it's physically accessed by the user.

I found this hack on GitHub but it only targets Android and I don't know if it'll work on iOS also:

// From Lindsey Simon
/**
 * This is a hack to make text input focus work in Android/PhoneGap
 * where calling el.focus() doesn't actually have the blinking cursor
 * effect = scumbag.
 * @param {Zepto} $el A zepto element.
 */
ws.focus = function($el) {
  var el = $el.get(0);
  el.focus();
  el.setSelectionRange && el.setSelectionRange(0, 0);
};