Материал Выберите мерцание на iOS

Question

Я пытаюсь создать свой сайт в Material Design, однако я нашел одну проблему с Material Select независимо от того, использую ли я MDB (Material Design for Bootstrap) или Materialize CSS framework. Оба отлично работают на Windows/OSX/Android, однако по какой-то причине, когда я открываю Material Select component на своем iPad и нажимаю на него, появляется мигающий курсор, отображающийся на фоне раскрывающегося списка.

Answer 1

Попробуйте следующий код:

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

Answer 2

Я была такая же проблема на IOS устройств, я использую выберите из выпадающего меню materialisecss "http://materializecss.com/forms.html". , чтобы исправить проблему мигающего курсора, я использовал ссылочный код снизу и немного изменил этот код. .

Ссылка Ссылка: https://github.com/Dogfalo/materialize/issues/901 (проверка комментарий на "хи-бд прокомментировал 17 ноября 2015")

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 ('выберите') material_select(); для инициализации материализуемого кода выбора и отдыха является исправление.

единственная проблема это дает проблемы на виду рабочего стола, так ДОБАВЛЕНО подвижное состояние обнаружения

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

Примечание: Добавьте этот код в документе готовые $ (документ) .ready (функция() {.. .});

все. Надеюсь, это разобратся с вашей проблемой. С уважением, и у меня хороший день :)

Answer 3

Извинения, приведенный выше код работает, но затем он останавливает прокрутку для выпадающего списка.

На данный момент я использую нижеследующее исправление, но сначала показывает мигающий курсор, а затем скрывает его. но все же это не является идеальным решением, если у кого есть лучшее решение, пожалуйста, напишите здесь :)

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