<input>属性autocapitalize="words"在iOS 8,9下的移动Safari中使用默认的iOS键盘打破。它将字段的前2个字母大写，而不是每个单词的第一个字母。
要进行测试，请在iOS模拟器或真实设备上打开以下字段：
First name: <input type="text" autocorrect="off" autocapitalize="words" value="First Name">
您可以使用https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_submit进行测试，或者在iOS 8或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>我很惊讶自8.x以来一直存在并且已经在雷达之下。
有一个已知的解决方法吗？
更新10/13：iPhone 6s + Safari完全忽略输入字段上设置的任何HTML属性。
如果您愿意（暂时）包含此库，似乎有一个解决方法：https://github.com/agrublev/autocapitalize。但它确实需要jQuery，因此在移动设备上可能不太理想。我已经创建了这一小段代码，它只为不使用jQuery的单词做同样的事情。它可以延伸到包括其他情况。
下面的示例还将最初在页面就绪上的单词大写，而不是仅仅在'keyup'事件上。我已经在几个设备上测试了代码并且没有出现错误。但是如果某些东西不起作用或者你觉得可以做得更好，可以随意评论。
请注意，我添加的'domReady'功能适用于IE9及以上版本。如果您需要旧版本的支持，请参阅this。
// 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();
});