web-dev-qa-db-fra.com

Le plugin choisi ne semble pas fonctionner sur les navigateurs mobiles

J'ai mis en place un plugin choisi pour un champ de sélection pour que l'utilisateur puisse taper une recherche dans une longue liste.

Bien que je développe cela pour les téléphones mobiles et bien qu'il fonctionne correctement sur ordinateur, il est désactivé sur les deux Apple et Android et l'interface utilisateur par défaut apparaît) pour l'entrée de sélection.

Je voudrais utiliser le plugin sur les téléphones.

javascriptandroidjqueryjquery-chosen
31
Boldizsar

Avant d'utiliser un plugin, essayez de vérifier sa portée.

Chosen n'est pas pris en charge sur Android ou IOS, "Chosen est désactivé sur iPhone, iPod Touch et Android appareils mobiles "

Consultez le lien officiel CHOISI ici

32
dreamweiver

Une fonction browser_is_supported dans chosen.jquery.js illustre qu'il évite délibérément l'activation sur Android et la plate-forme iPhone ( en raison de plusieurs problèmes UX ). Mais vous pouvez le pirater vous-même.

 AbstractChosen.browser_is_supported = function() {
  if (window.navigator.appName === "Microsoft Internet Explorer") {
    return document.documentMode >= 8;
  }
  if (/iP(od|hone)/i.test(window.navigator.userAgent)) {
    return false;
  }
  if (/Android/i.test(window.navigator.userAgent)) {
    if (/Mobile/i.test(window.navigator.userAgent)) {
      return false;
    }
  }
  return true;
};
16
Aborn Jiang

AbstractChosen.browser_is_supported la fonction ne vous permet pas d'utiliser ce plugin sur les appareils mobiles et Internet Explorer afin que vous puissiez le pirater vous-même.

Trouvez les lignes ci-dessous dans chosen.jquery.js et commentez ce code. Maintenant, le plugin choisi fonctionnera sur les appareils mobiles.

if (!AbstractChosen.browser_is_supported()) {
    return this;
}   
if (!AbstractChosen.browser_is_supported()) {
    return;  
}
9
Muhammad Waqas

à désactivé dans la tablette mobile

 AbstractChosen.browser_is_supported = function () {
        if (window.navigator.appName === "Microsoft Internet Explorer") {
            return document.documentMode >= 8;
        }
        //if (/iP(od|hone)/i.test(window.navigator.userAgent))
        if ((/iPhone|iPod|iPad|Android|android|playbook|silk|BlackBerry/).test(navigator.userAgent)) 
        {
            return false;
        }
        if (/Android/i.test(window.navigator.userAgent)) {
            if (/Mobile/i.test(window.navigator.userAgent)) {
                return false;
            }
        }
        return true;
    };
3
neel upadhyay

Posté ici comme solution de rechange, j'ai implémenté car je dépendais du plugin ChosenJS pour fonctionner afin que le CSS personnalisé puisse être appliqué. J'espère que cela aide quelqu'un d'autre.

Disclaimer: La réponse ci-dessus par @dreamweiver devrait toujours être la réponse acceptée, étant donné la question.

var chosenSelects = $('.ui-select').find('.chosen-select, [chosen]'),
    $select, $option;

if (chosenSelects) {
    chosenSelects.chosen();

    // Check for 'chosen' elements on mobile devices
    // -----
    // Given that ChosenJS has expressly been disabled from running
    // on mobile browsers, the styles have to be applied manually.
    // Source: https://github.com/harvesthq/chosen/pull/1388
    // -----
    // The code below gathers all 'chosen' selectors and adds
    // 'chosen-mobile' as a className. This className is then
    // used to apply the necessary styles for mobile browsers.
    // Within each select, if an 'option' has an empty value,
    // then that value will be given 'selected' and 'disabled'
    // attributes to act as a placeholder, adopting the text
    // in the 'data-placeholder' as the text to be displayed.
    if ( /iP(od|hone)/i.test(window.navigator.userAgent)
        || (/Android/i.test(window.navigator.userAgent) && /Mobile/i.test(window.navigator.userAgent)) ) {
        chosenSelects.each(function () {
            $select = $(this);
            $select.addClass('chosen-mobile');

            $select.find('option').each(function () {
                $option = $(this);

                if ( $option.val() == '' ) {
                    $option
                        .attr('selected', 'selected')
                        .attr('disabled', 'disabled')
                        .text( $select.data('placeholder') );
                }
            });
        });
    }
}

Avec cela, j'utilise ensuite .ui-select .chosen-mobile pour appliquer le CSS nécessaire.

3
carmat

Pour moi, c'était cette ligne:

        }, AbstractChosen.browser_is_supported = function() {
            return "Microsoft Internet Explorer" === window.navigator.appName ? document.documentMode >= 8 : /iP(od|hone)/i.test(window.navigator.userAgent) ? !1 : /Android/i.test(window.navigator.userAgent) && /Mobile/i.test(window.navigator.userAgent) ? !1 : !0
        }

changé à cela et cela a fonctionné comme un charme.

}, AbstractChosen.browser_is_supported = function() {          
return true;
}
1
Onur Özgüzel