2016-08-09 47 views
6

Ich versuche, meine Website in Material Design zu erstellen, jedoch habe ich ein Problem mit Materialauswahl gefunden, unabhängig davon, ob ich MDB (Material Design for Bootstrap) oder Materialise CSS Framework verwende. Beide funktionieren gut unter Windows/OSX/Android, aber aus irgendeinem Grund, wenn ich Material Select component auf meinem iPad öffne und darauf klicke, erscheint ein blinkender Cursor, der vom Hintergrund des Dropdowns angezeigt wird.Material Wählen blinkend auf iOS

enter image description here

Antwort

7

Versuchen Sie, den folgenden Code:

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

hatte ich das gleiche Problem auf iOS-Geräten, ich wählen Dropdown bin mit von materialisecss "http://materializecss.com/forms.html". um das blinkende Cursor-Problem zu beheben, habe ich den Referenzcode von unten verwendet und diesen Code leicht geändert. .

Ref-Link: https://github.com/Dogfalo/materialize/issues/901 (Check-Kommentar von "Chi-bd kommentiert 17. November 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(); initialisieren materialisieren wählen und Ruhecode ist das Update.

das einzige Problem ist dies gibt Problem auf Desktop-Ansicht so hinzugefügt mobile Erfassungsbedingung

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

Hinweis: diesen Code hinzufügen in Dokument bereit $ (document) .ready (function() {.. .});

das ist es. Ich hoffe, dies wird Ihr Problem lösen. Grüße, und einen schönen Tag :)

-1

Entschuldigung, der obige Code funktioniert, aber dann stoppt das Scrollen für Drop-Down.

Momentan verwende ich unter fix, aber es zeigt den blinkenden Cursor zuerst und dann versteckt es es. aber immer noch das ist nicht die perfekte Lösung, wenn jemand eine bessere Lösung hat bitte hier posten :)

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