Can autocapitalize be turned off with javascript in mobile safari?

Question

Mobile safari supports an attribute on input elements called autocapitalize [documented here], which when set to 'off' will stop the iPhone capitalizing the text input into that field, which is useful for url or email fields.

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

But this attribute is not valid in html 5 (or another spec as far as I know) so including it in the html will produce an invalid html page, what I would like to do is be able to add this attribute to particular fields onload with javascript with something like this:

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

which adds the correct attribute in firefox and desktop safari, but doesn't seem to do anything in mobile safari, why?

Answer 1

This should be fixed in iPhone OS 3.0. What version of iPhone OS are you trying this on?

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. You can improve the user experience on iOS even more by specifying the type of the input to be "email" to automatically bring up the "email" keyboard (slightly better characters for typing an email).

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

Here is some documentation on how input types can control the iOS keyboard.

Answer 3

It's just as invalid if you add it via script or if you add it in the markup. It's just that the validator isn't able to notice it if you add it via script.

Just put it in the markup and put a comment next to it, like <!-- the "autocapitalize" attribute is an Apple proprietary extension for the iPhone to change its IME behaviour -->, that way people who look at the code in the validator will know what's up.

Answer 4

If it is a useful feature, you'll just have to pick between strict validation and user experience. Personally, I'd pick UX any day.

Answer 5

So I couldn't get jQuery to do it but plain old javascript, as ddkilzer suggested works, so I put together this function to apply the autocapitalize='off' option to all inputs with a specific class:

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