使用电子邮件键盘以HTML格式在手机上输入

Question

I've got a form with email field. I'd like it to use email keyboard on mobile browsers. Now, this is typically done by changing type: <input type="email"/> . However, when I do so, in the desktop Firefox and Chrome the field will be validated by browser. This breaks layout (in Firefox) and supersedes my own validation - which is then visible on all form fields except the email one (this is in Chrome).

Is there another way to switch the keyboard to email on mobile, or is there a way to disable validation in desktop browsers?

Answer 1

You could check if user is not browsing with mobile device, and then add novalidate to input field.

if(!( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )) { 
    $('#id').attr('novalidate', 'novalidate');
}

Also if you use this method keep this in your mind:

"User agent sniffing is a very noddy detection technique, user agent strings are a constant moving target, they should not be trusted alone." What is the best way to detect a mobile device in jQuery?