web-dev-qa-db-ja.com

選択したプラグインはモバイルブラウザーでは動作しないようです

ユーザーが長いリストからタイプ検索できるように、選択フィールドに Chosenプラグイン を設定しました。

私は携帯電話用にこれを開発していますが、コンピューター上では正常に動作しますが、AppleとAndroid電話とデフォルトのユーザーインターフェースがポップアップします選択入力用。

携帯電話でプラグインを使用したいと思います。

javascriptandroidjqueryjquery-chosen
31
Boldizsar

プラグインを使用する前に、そのスコープを確認してください。

選択はAndroidまたはIOSではサポートされていません、"選択されたiPhone、iPod Touch、およびAndroidモバイルデバイスでは無効です!

ここで公式の選択リンクを確認してください

32
dreamweiver

関数 browser_is_supported in chosen.jquery.jsは、AndroidおよびiPhoneプラットフォーム（ Xのいくつかの問題のため ）でのアクティブ化を意図的に回避することを示しています。しかし、自分でハッキングすることができます。

 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関数では、モバイルデバイスおよびInternet Explorerでこのプラグインを使用することはできないため、これを自分でハッキングすることができます。

chosen.jquery.jsで次の行を見つけて、このコードにコメントを付けます。これで、選択したプラグインはモバイルデバイスで動作します。

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

タブレットモバイルで無効に

 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

フォールバックとしてここに投稿すると、ChosenJSプラグインに依存して動作し、カスタムCSSを適用できるようになったため、実装しました。うまくいけば、これは他の人の助けになります。

免責事項： @dreamweiverによる上記の回答は、質問が与えられた場合でも受け入れられる回答である必要があります。

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') );
                }
            });
        });
    }
}

これで、.ui-select .chosen-mobile必要なCSSを適用します。

3
carmat

私にとっては、この行でした：

        }, 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
        }

それに変更し、それは魅力のように働いた。

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