ios/Mobile Safari changing <input> type attribute based on label?

Question

I haven't been able to find any documentation or other reports on this through Google.

On Mobile Safari (in at least iOS6+7) I have a form containing several <input>s with type="text". A couple of these fields are for the user's email address and phone number and are labelled appropriately. As far as I can tell Mobile Safari is changing those <input>s to give them a "type" attribute that it considers appropriate to the label -- eg the email field is given type="email", and the phone number field is given type="number" (strangely, not type="tel"). For the email field this poses no problems, but the phone number field fails to render the default value because it's not in the correct format for a "number" field (the number is displayed with spaces). So far I haven't found any javascript which might be causing this.

I could understand this happening when the "type" attribute is omitted entirely, but I've double-checked that these fields are definitely rendering with type="text" and I've confirmed that all major desktop browsers are rendering the fields correctly. I even don't think it would be an issue if the phone field was changed to type="tel" as I don't think that type has any format restrictions.

I am testing on iOS through XCode's iOS simulator paired with Safari's web inspector. Here's a screen shot of the field with label "Mobile Phone" in web inspector:

And for reference here's how that field is rendering (note that no value is rendered):

Has anyone else encountered this?

Update: this jsfiddle works fine in iOS which indicates it could be a javascript issue rather than webkit, although I've so far been unable to discover any javascript which could be causing this.

Answer 1

Are you using any javascript code along with your HTML, things like jQuery/jQuery UI can update fields when they are set as specific types. Have you tried disabling javascript in your web view/browser to check?