jua*_*nca 20 mobile-safari ios8 ios9
在具有默认iOS键盘的iOS 8,9下的移动Safari中,该<input>属性autocapitalize="words"被破坏.它将字段的前2个字母大写,而不是每个单词的第一个字母.
官方文档说支持:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html
要进行测试,请在iOS模拟器或真实设备上打开以下字段:
First name: <input type="text" autocorrect="off" autocapitalize="words" value="First Name">
您可以使用http://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 及更高版本。如果您需要旧版本的支持，请参阅此内容。
// 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();
});
| 归档时间： |
|
| 查看次数： |
1031 次 |
| 最近记录： |