材质选择在 iOS 上闪烁答案

【问题标题】：Material Select blinking on iOS材质选择在 iOS 上闪烁
【发布时间】：2016-12-15 09:09:52
【问题描述】：

我正在尝试在 Material Design 中创建我的网站，但是无论我使用 MDB（Bootstrap 的材料设计）还是 Materialize CSS 框架，我都发现 Material Select 存在一个问题。两者都在 Windows/OSX/Android 上运行良好，但是由于某种原因，当我在 iPad 上打开 Material Select component 并单击它时，下拉菜单的背景中会显示一个闪烁的光标。

【问题讨论】：

标签： ios css twitter-bootstrap material-design materialize

【解决方案1】：

试试下面的代码：

input.select-dropdown {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
}

【讨论】：

【解决方案2】：

我在 iOS 设备上遇到了同样的问题，我正在使用 materialisecss "http://materializecss.com/forms.html" 中的选择下拉菜单。为了解决闪烁的光标问题，我使用了下面链接中的参考代码并稍微修改了该代码。

参考链接：https://github.com/Dogfalo/materialize/issues/901（查看“chi-bd 于 2015 年 11 月 17 日发表评论”的评论）

jQuery('select').material_select();
/*--- Materialize Select dropdown blinking cursor fix for iOS devices ---*/
jQuery('select').siblings('input.select-dropdown').on('mousedown', function(e) {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
            e.preventDefault();
        }
    }
});

jQuery('select').material_select();初始化物化选择和休息代码是解决办法。

唯一的问题是这在桌面视图上出现问题，因此添加了移动检测条件

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

注意：在准备好的文档中添加这段代码 $(document).ready(function() { ... });

就是这样。我希望这能解决你的问题。问候，祝你有美好的一天:)

【讨论】：

【解决方案3】：

github上有一个开放的issue，@StaticBR提出了一种解决“iPhone（和一般的Safari）上的Dropdown Broken”问题的方法，链接here。

根据@StaticBR，

“问题是 IO13 Safari 在传播 Click 事件之前传播 TouchEnd 事件。

因此，如果您在下拉菜单中有一个点击监听器，它不会被正确触发，因为 Dropwdown 正在被 TouchEnd 事件关闭。之后，点击事件位于不同的位置或不再存在。删除触摸事件侦听器为我解决了这个问题。”

【讨论】：

【解决方案4】：

抱歉，上面的代码可以工作，但它会停止滚动下拉菜单。

目前我正在使用以下修复，但它首先显示闪烁的光标，然后将其隐藏。但这仍然不是完美的解决方案，如果有人有更好的解决方案，请在此处发布:)

function checkDropDown(obj){
var nextObj = jQuery(obj).next();
setTimeout(function(){       
    if (jQuery(nextObj).is(":visible")){
        jQuery("input.select-dropdown").css({
            "transition"    : "none",
            "left"            :    "-999999px"
        });
    }else{
        jQuery("input.select-dropdown").css({
            "left"            :    0
        });
    }
}, 250);
jQuery(document).ready(function(){
    jQuery("input.select-dropdown").on("focus", function(){
        checkDropDown(jQuery(this));
    });
    jQuery("input.select-dropdown").on("blur", function(){
        checkDropDown(jQuery(this));
    });
});

【讨论】：