选择的插件似乎不适用于移动浏览器[关闭]

Posted 2023-05-07

【中文标题】选择的插件似乎不适用于移动浏览器[关闭]

【英文标题】：Chosen plugin doesn't seem to work on mobile browsers [closed]

【发布时间】：2014-03-27 19:35:56

【问题描述】：

我为选择字段设置了Chosen plugin，以便用户能够从长列表中进行类型搜索。

虽然我正在为手机开发此功能，虽然它在计算机上运行良好，但它在 Apple 和 android 手机上均被禁用，并且会弹出默认用户界面以供选择输入。

我想在手机上使用该插件。

【问题讨论】：

就文档建议（以及 github 上的注释）而言，它不支持移动设备。您应该与开发人员一起讨论这个问题，并了解他们的计划是什么/自己开发以在移动设备上运行。

与<select> 元素的交互在移动设备上完全不同，甚至想要它也没有任何意义。

如果这个问题仍然有效，试试这个选择的分叉，这适用于手机 - github.com/rafalenden/chosen

试试select2.github.io，它可以在移动设备上运行

【参考方案1】：

在使用任何插件之前，请尝试检查其范围。

安卓或ios不支持Chosen，“Chosen在iPhone、iPod Touch和Android移动设备上被禁用”

Check Official CHOSEN link here

【讨论】：

如果您明确请求网站的桌面版本，它可以在 Safari 中的 iOS8 上运行。证明：shrani.si/f/2Z/4J/1IJOfa4Z/img4117.png

显然，iOS8 上的新 Safari 具有运行它的能力。请求该站点的桌面版本所做的只是将用户代理字符串从“Mozilla/5.0 (iPhone; CPU iPhone OS 8_0_2 like Mac OS X) AppleWebKit/600.1.4 (Khtml, like Gecko) Version/8.0 Mobile/12A405 Safari /600.1.4" 到 "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10) AppleWebKit/538.44 (KHTML, like Gecko) Version/8.0 Safari/538.44" 这似乎绕过了选择的禁用浏览器检测?

@techouse：嗯，在这种情况下，它可能会在后期引发一些未知问题，因为它没有在所选插件中处理：D。无论如何都不错。

selectize 是适用于移动设备的替代方案

好吧，这可能会解决入门级的问题，因为即使您试图绕过所选库的兼容性检查，也可能无法在这些浏览器上运行所选库的某些功能。除非你 100% 确定你在做什么，否则永远不要试图改变图书馆的行为。

【参考方案2】：

chosen.jquery.js 中的函数 browser_is_supported 说明它故意避免在 Android 和 iPhone 平台上激活 (because of several UX issues)。但是你可以自己破解它。

 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;
;

【讨论】：

非常感谢！！！！！！

【参考方案3】：

AbstractChosen.browser_is_supported 功能不允许您在移动设备和 Internet Explorer 上使用此插件，因此您可以自行破解。

在chosen.jquery.js 中找到以下行并注释此代码。现在所选插件将在移动设备上运行。

if (!AbstractChosen.browser_is_supported()) 
    return this;
   
if (!AbstractChosen.browser_is_supported()) 
    return;  

【讨论】：

太棒了。成功了！非常感谢。

非常感谢您的大力帮助。真的很感激。

这确实有效，但它让我在选择时单击 2 次以显示它。 ..第一次打开和关闭+打开键盘，第二次一切正常。有什么解决方案可以让它在第一次点击时起作用？

【参考方案4】：

在平板手机中禁用

 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;
    ;

【参考方案5】：

对我来说是这行：

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

【讨论】：

这个答案唤醒了我..

更改此文件后，如何提交到生产环境？

【参考方案6】：

在这里发布作为我已经实现的后备，因为我依赖 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。

【讨论】：

出色的答案！