autocapitalize = "từ" bị hỏng trên Safari trên thiết bị di động trong iOS 8,9 - Có cách giải quyết khác không?

Thuộc tính <input>autocapitalize="words" bị hỏng trong Safari trên thiết bị di động dưới iOS 8,9 với bàn phím iOS mặc định. Nó viết lên 2 chữ cái đầu tiên của trường, không phải chữ cái đầu tiên của mỗi từ.autocapitalize = "từ" bị hỏng trên Safari trên thiết bị di động trong iOS 8,9 - Có cách giải quyết khác không?

tài liệu chính thức nói được hỗ trợ: https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html

Để kiểm tra, mở lĩnh vực sau đây trên iOS giả lập hoặc thiết bị thực:

First name: <input type="text" autocorrect="off" autocapitalize="words" value="First Name">

Bạn có thể sử dụng http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_submit để kiểm tra, hoặc đoạn này trên iOS 8 hoặc 9:

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Test autocapitalize</title> 
 
    </head> 
 
    <body> 
 
    <form> 
 
     <label for="words">autocapitalize="words"</label> 
 
     <input type="text" autocapitalize="words" name="text1" id="words" /><br /> 
 
     <label for="sentences">autocapitalize="sentences"</label> 
 
     <input type="text" autocapitalize="sentences" name="text2" id="sentences" /><br /> 
 
     <label for="none">autocapitalize="none"</label> 
 
     <input type="text" autocapitalize="none" name="text3" id="none" /> 
 
    </form> 
 
    </body> 
 
</html>

Tôi ngạc nhiên vì điều này đã có mặt từ 8.x và đã trôi qua dưới rada.

Có cách giải quyết nào không?

Cập nhật 10/13: iPhone 6s + Safari hoàn toàn bỏ qua bất kỳ thuộc tính HTML nào được đặt trên trường nhập.

Nguồn

2015-09-18 juanca

Bạn đã báo cáo điều này với Apple chưa? – Ken

Ngoài ra, tôi không thấy sự cố trong url w3 ... mà bạn tham chiếu - có thể đây là vấn đề với JavaScript bạn đang sử dụng không? – Ken

Có, tôi đã đăng câu hỏi ở đây: https://forums.developer.apple.com/message/57845#57845 Không chắc đó có phải là nơi tốt nhất hoặc có thể ở đâu đó khác không. Để làm rõ về liên kết w3 mà tôi đã cung cấp, bạn cần phải thay thế đánh dấu HTML bằng 'Tên: ' Sau đó, bạn sẽ có thể nhìn thấy vấn đề – juanca

Dường như có một giải pháp cho vấn đề này nếu bạn sẵn sàng (tạm thời) bao gồm thư viện này: https://github.com/agrublev/autocapitalize. Tuy nhiên nó đòi hỏi jQuery, vì vậy có thể không lý tưởng trên một thiết bị di động. Tôi đã tạo ra đoạn mã nhỏ này làm cùng một điều chỉ dành cho các từ mà không cần sử dụng jQuery. Nó có thể ofcourse được extented để cũng bao gồm các trường hợp khác.

Ví dụ dưới đây cũng viết hoa các từ ban đầu trên trang sẵn sàng, thay vì chỉ trên sự kiện 'keyup'. Tôi đã thử nghiệm mã trên một số thiết bị và chưa nhận được lỗi. Nhưng cảm thấy tự do để bình luận nếu một cái gì đó không hoạt động hoặc bạn cảm thấy một cái gì đó có thể được thực hiện tốt hơn.

Lưu ý rằng chức năng 'domReady' tôi đã thêm hoạt động cho IE9 trở lên. Vui lòng xem this nếu bạn cần hỗ trợ cho phiên bản cũ hơn.

// Create one global variable 
var lib = {}; 

(function (lib) { 

    lib.autocapitalize_element = function (element) { 
    var val = element.value.toLowerCase(); 
    var split_identifier = " "; 
    var split = val.split(split_identifier); 
    for (var i = 0; i < split.length; i ++) { 
     var v = split[i]; 
     if (v.length) { 
      split[i] = v.charAt(0).toUpperCase() + v.substring(1); 
     } 
    }; 
    val = split.join(split_identifier); 
    element.value = val; 
    } 

    lib.autocapitalize_helper = function(element) { 
    element.onkeyup = function(e) { 
     var inp = String.fromCharCode(e.keyCode); 
     if (/[a-zA-Z0-9-_ ]/.test(inp)) { 
     lib.autocapitalize_element(element); 
     } 
    }; 
    } 

    lib.autocapitalize = function() { 
    var elements = document.querySelectorAll("input[autocapitalize], textarea[autocapitalize]"); 
    for(var i = 0; i < elements.length; i++) { 
     lib.autocapitalize_helper(elements[i]); 
     lib.autocapitalize_element(elements[i]); 
    } 
    } 

    lib.domReady = function(callback) { 
    document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback); 
    }; 
}(lib)); 


// This function gets called when the dom is ready. I've added it to the lib variable now because I dislike adding global variables, but you can put it anywhere you like. 
lib.domReady(function() { 
    lib.autocapitalize(); 
});

Nguồn

2017-07-12 15:09:44

Chắc chắn. Bạn có thích jQuery không? Sau đó, tôi sẽ thấy những gì tôi có thể whip lên tối nay;) –

autocapitalize = "từ" bị hỏng trên Safari trên thiết bị di động trong iOS 8,9 - Có cách giải quyết khác không?

Trả lời

Các vấn đề liên quan