Chất liệu Chọn nhấp nháy trên iOS

Question

Tôi đang cố gắng tạo trang web của mình trong Material Design, tuy nhiên tôi đã tìm thấy một vấn đề với Material Select bất kể tôi có sử dụng MDB (Material Design for Bootstrap) hay Materialize CSS framework hay không. Cả hai đều hoạt động tốt trên Windows/OSX/Android, tuy nhiên vì một lý do nào đó khi tôi mở Material Select component trên iPad của mình và nhấp vào nó, có một con trỏ nhấp nháy hiển thị từ Nền của trình đơn thả xuống.

Answer 1

Hãy thử đoạn mã sau:

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

Answer 2

tôi đã cùng một vấn đề trên các thiết bị iOS, Tôi đang sử dụng chọn thả xuống từ materialisecss "http://materializecss.com/forms.html". để khắc phục vấn đề con trỏ nhấp nháy, tôi đã sử dụng mã tham chiếu từ liên kết bên dưới và sửa đổi mã đó một chút. .

Ref Link: https://github.com/Dogfalo/materialize/issues/901 (kiểm tra bình luận bằng cách "chi-bd nhận xét về ngày 17 Tháng 11 năm 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 ('chọn') material_select(); để khởi tạo materialize chọn và nghỉ ngơi mã là sửa chữa.

vấn đề duy nhất, đây được cho vấn đề trên quan điểm máy tính để bàn để thêm vào điện thoại di động tình trạng phát hiện

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

Lưu ý: Thêm mã này trong tài liệu $ sẵn sàng (document) .ready (function() {.. .});

là vậy. Tôi hy vọng điều này sẽ giải quyết vấn đề của bạn. Trân trọng, và chúc một ngày tốt đẹp :)

Answer 3

Xin lỗi, mã trên hoạt động nhưng sau đó nó ngừng cuộn để thả xuống.

Hiện tại tôi đang sử dụng sửa lỗi bên dưới, nhưng nó hiển thị con trỏ nhấp nháy trước và sau đó nó ẩn nó. nhưng vẫn còn đây không phải là giải pháp hoàn hảo, nếu có ai có giải pháp tốt hơn xin vui lòng gửi tại đây :)

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