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
Antwort
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;
}
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 :)
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));
});
});
- 1. Angular Material Autocomplete - Suche auf Wählen
- 2. Android ListView CheckedTextView Blinkend
- 3. blinkend und setTimeout
- 4. UITextField Hintergrund blinkend
- 5. Stoppe die Taskleiste blinkend
- 6. Angular Material wählen wirkt seltsam auf feste Blöcke
- 7. Schublade wie Google Material Design für iOS
- 8. Fokus einstellen UND Cursor auf bestimmte JTable-Zelle blinkend
- 9. Ziehen über UICollectionViewCells wählen iOS
- 10. android vs iOS, die wählen
- 11. Seltsames webview schwarz blinkend beim Scrollen
- 12. mit while (! (Cin ... und blinkend) prompt
- 13. Angular Material wählen Sie die Anzeige unter Dialog
- 14. Gibt es eine Version von Angular Material md-wählen Sie mit wählen Sie alle Option
- 15. three.js ändert Textur auf Material
- 16. Disable Material Ripple auf Tablayout
- 17. Dialog auf Reagieren Material-Ui
- 18. Three.js - Change Material auf Runtime
- 19. Material-ui wählen Felder und Rendering-Listen basierend auf den ausgewählten Werten
- 20. Wie füge ich mehrere Kartenansichten in Material für iOS hinzu?
- 21. Bootstrap vs Material Design auswählen
- 22. Hintergrundfarbe durch transparentes PNG auf Material anzeigen?
- 23. Hintergrund mit Farbverlauf auf Material-Symbolleiste
- 24. Animate Statusleiste Farbe auf DrawerLayout - Material Design
- 25. Material auf modernen (großen) Website-Architektur-Lösungen
- 26. Wie Material Design auf Android Studio-Projekt
- 27. scharfkantiges Material Sidenav gesperrt öffnet immer auf
- 28. Angular Material: Validierungsfehler auf Nicht-Formular-Eingabe
- 29. Angular Material Menü öffnen auf Maus Hover
- 30. Eckiges Material