¿Se puede autocapitalizar desactivar con javascript en el safari móvil?

Question

Safari móvil admite un atributo en elementos de entrada llamado autocapitalize [documented here], que cuando se establece en 'off' detendrá el iPhone capitalizando la entrada de texto en ese campo, que es útil para campos de correo electrónico o url.

<input type="text" class="email" autocapitalize="off" /> 

Pero este atributo no es válido en HTML 5 (u otra especificación por lo que sé) por lo que su inclusión en el html producirá una página HTML no válido, lo que me gustaría hacer es ser capaz de añadir este atributo a campos particulares onLoad con javascript con algo como esto:

$(document).ready(function(){ 
    jQuery('input.email, input.url').attr('autocapitalize', 'off'); 
}); 

que añade el atributo correcto en Firefox y Safari de escritorio, pero no parece hacer nada en Safari móvil, cualquier idea por qué?

Answer 1

Esto debería arreglarse en iPhone OS 3.0. ¿En qué versión de iPhone OS estás probando esto?

Email: <input id="email" type="text"><br> 
URL: <input id="url" type="text"><br> 
<script> 
//document.getElementById("email").autocapitalize = 'off'; 
//document.getElementById("url").autocapitalize = 'on'; 
document.getElementById("email").setAttribute('autocapitalize', 'off'); 
document.getElementById("url").setAttribute('autocapitalize', 'on'); 
alert(document.body.innerHTML); 
</script> 

Answer 2

Si es una característica útil, solo tendrá que elegir entre la validación estricta y la experiencia del usuario. Personalmente, escogería UX cualquier día.

Answer 3

Así que no pude conseguir jQuery para hacerlo pero JavaScript simple y llano, como sugirió ddkilzer obras, así que armar esta función para aplicar el autocapitalize = 'off' opción para todas las entradas con una clase específica:

$(document).ready(function(){ 
    // disable autocapitalize on .url, .email fields 
    unautocapitalize('url'); 
    unautocapitalize('email'); 
}); 

function unautocapitalize(cssClass){ 
    var elems = document.getElementsByClassName(cssClass); 
    for (var j = 0; j < elems.length; j++){ 
    elems[j].setAttribute('autocapitalize', 'off'); 
    } 
} 

Answer 4

Nota al margen. Puede mejorar aún más la experiencia del usuario en iOS al especificar el tipo de entrada que será "correo electrónico" para que aparezca automáticamente el teclado "correo electrónico" (caracteres ligeramente mejores para escribir un correo electrónico).

<input type="email" class="email" autocapitalize="off" /> 

Here is some documentation sobre cómo los tipos de entrada pueden controlar el teclado de iOS.

Answer 5

Es igual de inválido si lo agrega mediante script o si lo agrega en el marcado. Es solo que el validador no puede notarlo si lo agrega a través de un script.

Simplemente póngalo en el marcado y coloque un comentario al lado, como <!-- the "autocapitalize" attribute is an Apple proprietary extension for the iPhone to change its IME behaviour -->, de esta forma las personas que miran el código en el validador sabrán qué sucede.