Search code examples
javascripthtmliphonemobile-safari

Can autocapitalize be turned off with javascript in mobile safari?

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?

Solution

  • 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>