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, any ideas 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

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 3

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

Answer 4

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.