Các vấn đề thiết bị iOS với đầu vào biểu mẫu HTML (loại = văn bản)

Question

Vì vậy, tôi có biểu mẫu đăng nhập HTML với hai trường: Email và Mật khẩu. Đây có thể được điền dễ dàng trên bất kỳ trình duyệt nào của thiết bị khác với thiết bị iOS (iPhone, iPad). Trên các lĩnh vực IOS khó có thể được tập trung và một khi trong tập trung, bàn phím bật lên, tôi bắt đầu gõ nhưng không có gì thực sự được lấp đầy. Tôi đã thử cả Chrome và Safari và vẫn nhận được kết quả tương tự. Cánh đồng vẫn đen. Dưới đây là cách biểu mẫu của tôi được định dạng:

<form method="post" name="login" action="login"> 
    <div class="divInputWrapper "> 
     <i class="icon-envelope inputIcon inlineElt"></i> 
     <label for="email"></label> 
     <input type="text" name="email" placeholder="Enter your email address" class="formInput"/> 
    </div> 
    <div class="divInputWrapper "> 
     <i class="icon-envelope inputIcon inlineElt"></i> 
     <label for="password"></label> 
     <input type="password" name="password" class="formInput"/> 
    </div> 
    <button class="blue centeredContent">Login</button> 
</form> 

Tôi đã thử thêm thuộc tính tự động lấy nét, đặt trước giá trị và vẫn giữ nguyên.

Answer 1

Đã tìm thấy sự cố, đây là thiết lập lại biểu định kiểu mà tôi tìm thấy trực tuyến để trợ giúp hành vi thiết bị cảm ứng khi người dùng chạm/giữ phần tử và tôi sao chép nó trên hầu hết các dự án của tôi. Vì vậy, nếu bạn có vấn đề này, rất có thể bạn có các dòng này trong css của bạn:

*, *:before, *:after { 
     -webkit-user-select: none; 
     -khtml-user-select: none; 
     -moz-user-select: none; 
     -ms-user-select: none; 
     user-select: none; 
    } 

Vì vậy, chỉ cần xóa hoặc đặt nó thành mặc định. Và nếu mục đích của bạn là để ngăn không cho người từ việc lựa chọn nội dung trên trang web của bạn, thì chắc chắn rằng bạn đặt lại sở hữu phong cách này để mặc định trên đầu vào

input, input:before, input:after { 
     -webkit-user-select: initial; 
     -khtml-user-select: initial; 
     -moz-user-select: initial; 
     -ms-user-select: initial; 
     user-select: initial; 
    }