Próbuję utworzyć moją stronę w Material Design, jednak znalazłem jeden problem z wyborem materiału niezależnie od tego, czy używam MDB (Material Design for Bootstrap), czy Materialise CSS framework. Oba działają poprawnie na Windows/OSX/Androidzie, jednak z jakiegoś powodu, kiedy otwieram Material Select component na moim iPadzie i klikam na nim, pojawia się migający kursor z tła listy rozwijanej.Materiał Wybrać miganie na iOS
Odpowiedz
Wypróbuj poniższy kod:
input.select-dropdown {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
miałem ten sam problem na urządzeniach z iOS, używam wybierz rozwijaną od materialisecss "http://materializecss.com/forms.html". naprawić błąd migającego kursora, użyłem kodu odniesienia z poniższego linku i nieznacznie zmodyfikowałem ten kod. .
Ref Link: https://github.com/Dogfalo/materialize/issues/901 (komentarz kontrola przez "chi-BD skomentował w dniu 17 listopada 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 ('select') material_select(); aby zainicjować zmaterializuj wybierz i kod odpoczynku jest poprawką.
jedynym problemem było to dawał problem na widok pulpitu więc warunek dodana detekcja mobilną
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
Uwaga: Dodaj ten kod w dokumencie gotowe $ (document) .ready (function() {.. .});
to wszystko. Mam nadzieję, że to rozwiąże twój problem. Pozdrawiam i życzę miłego dnia :)
Przepraszam, powyższy kod działa, ale potem przestaje przewijać listę rozwijaną.
Na razie używam poniżej poprawki, ale najpierw pokazuje migający kursor, a następnie ją ukrywa. ale nadal nie jest to idealne rozwiązanie, jeśli ktoś ma lepsze rozwiązanie proszę pisać tutaj :)
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));
});
});