ios8 - que - autocapitalize="palabras" rotas en Mobile Safari en iOS 8,9-¿Existe alguna solución?
que es ios beta (1)
El atributo <input> autocapitalize="words" está roto en Mobile Safari bajo iOS 8,9 con el teclado iOS predeterminado. Hace mayúsculas las 2 primeras letras del campo, no la primera letra de cada palabra.
La documentación oficial dice que se admite: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html
Para probar, abra el siguiente campo en el emulador de iOS o dispositivo real:
First name: <input type="text" autocorrect="off" autocapitalize="words" value="First Name">
Puede usar http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_form_submit para probar, o este fragmento de código en iOS 8 o 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>
Me sorprende que esto haya estado presente desde 8.x y haya pasado por debajo del radar.
¿Hay una solución conocida?
Actualización 10/13: iPhone 6s + Safari ignora por completo cualquier atributo HTML establecido en el campo de entrada.
Parece que hay una solución para este problema si está dispuesto (temporalmente) a incluir esta biblioteca: https://github.com/agrublev/autocapitalize . Sin embargo, sí requiere jQuery, por lo que podría no ser ideal en un dispositivo móvil. He creado este pequeño fragmento de código que hace lo mismo solo con palabras sin el uso de jQuery. Por supuesto, puede ampliarse para incluir también otros casos.
El ejemplo a continuación también pone en mayúscula las palabras inicialmente en la página lista, en lugar de solo en el evento ''keyup''. He probado el código en varios dispositivos y no he recibido ningún error. Pero no dude en comentar si algo no funciona o si siente que se puede hacer algo mejor.
Tenga en cuenta que la función ''domReady'' que agregué funciona para IE9 en adelante. Por favor vea this si necesita soporte para una versión anterior.
// 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();
});