Peut autocapitalize être désactivé avec javascript safari mobile?

Question

Safari mobile prend en charge un attribut sur les éléments d'entrée appelé autocapitalize [ documenté], qui lorsqu'il est réglé sur « off » arrêtera l'iPhone en capitalisant l'entrée de texte dans ce domaine, ce qui est utile pour les champs url ou email.

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

Mais cet attribut est pas valide en HTML 5 (ou une autre spécification pour autant que je sache) afin de l'inclure dans le code html produira une page html invalide, ce que je voudrais faire est d'être en mesure d'ajouter cet attribut particulier champs onload avec javascript avec quelque chose comme ceci:

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

qui ajoute l'attribut correct dans firefox et safari de bureau, mais ne semble pas faire quoi que ce soit dans Safari mobile, pourquoi?

Answer 1

Cela devrait être corrigé dans l'iPhone OS 3.0. Quelle version de l'iPhone OS vous essayez ceci sur?

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

Side note. Vous pouvez améliorer l'expérience utilisateur sur iOS encore plus en spécifiant le type de l'entrée à « e-mail » pour mettre automatiquement le clavier « e-mail » (légèrement meilleurs caractères pour taper un e-mail).

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

Voici quelques documents sur la façon dont les types d'entrée peuvent contrôler le clavier iOS.

Answer 3

Il est tout aussi valide si vous ajoutez via script ou si vous l'ajoutez dans le balisage. Il est juste que le validateur ne peut le remarquer si vous l'ajoutez via le script.

Il suffit de le mettre dans le balisage et de mettre un commentaire à côté de lui, comme <!-- the "autocapitalize" attribute is an Apple proprietary extension for the iPhone to change its IME behaviour -->, que les gens de façon qui regardent le code dans le validateur savent ce qui se passe.

Answer 4

S'il est une fonction utile, vous aurez juste à choisir entre la validation stricte et l'expérience utilisateur. Personnellement, je choisirais UX tous les jours.

Answer 5

Je ne pouvais pas obtenir jQuery pour le faire, mais bon vieux javascript, comme suggéré ddkilzer œuvres, donc je mis en place cette fonction pour appliquer la autocapitalize = « off » option pour toutes les entrées avec une classe spécifique:

$(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');
  }
}