6

Knowing both is used as a hint for mobile browsers, I couldn't find a real doc about the difference between using <input type="tel"> and <input inputmode="tel">. So

  • what's the difference?
  • which is better to use?
  • why duplication if it's the same?

The MDN doc suggests using the type. But it's still unclear on the explaination.

Thanh Trung
  • 3,566
  • 3
  • 31
  • 42
  • Ive tested on https://inputtypes.com/ and inputmode=numeric doesn't show only number keypad on android chrome. So for me seems like type=number is better – cikatomo Jun 18 '23 at 10:24
  • `type='number'` is a bad idea as phone numbers can consist of other characters too, and a number (100034) is an entirely different thing from a phone number (1-800-U-LUV-PIZZA). The keyboards offered for numbers vs phone numbers, by iOS / Android, are different too. – jorisw Jul 19 '23 at 11:07
  • Sorry but the topic isn't about the numbers but "tel" as in telephone.. – Thanh Trung Jul 30 '23 at 16:05

2 Answers2

1

The difference is the purpose of the attribute.

inputmode defines what kind of input mode the user agent (browser / operating system) should present to the user. Basically what type of keyboard.

type is about what type of value is expected, to which the user agent may apply acceptance / validation patterns. That said, the user agent will probably assume a default input mode based on that too.

It's entirely possible, for example, that you don't trust the default input mode or accepted input pattern that is supplied by the user agent. In such a case, type='text' is the safest input type, while the inputmode is still at your discretion, which you could set to tel in this case.

jorisw
  • 875
  • 1
  • 11
  • 17
-2

If you want only show the "phone keys" like 0 to 9 and * and #, use

<input inputmode="tel">

If you want to show a form field with regular keyboard, use

<input type="tel">

Also see "Everything You Ever Wanted to Know About inputmode".

the Tin Man
  • 158,662
  • 42
  • 215
  • 303
Julian Johannsen
  • 25
  • 1
  • 4
  • On iOS, they appear the same keypad, no regular keyboard – Thanh Trung Feb 21 '22 at 11:18
  • OK, Apple, grwl ... have a look at [iPhone / iOS : Presenting HTML 5 Keyboard for Postal Codes](https://stackoverflow.com/questions/25425181/iphone-ios-presenting-html-5-keyboard-for-postal-codes) and [Managing the Keyboard // Apple DEV](https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html#//apple_ref/doc/uid/TP40009542-CH5-SW12) – Julian Johannsen Feb 21 '22 at 16:31
  • I did. Nothing useful that could lead to conclusion – Thanh Trung Feb 21 '22 at 17:04