0

I am designing a web app. In some places, the user will have to enter a single digit. I would like the input for the digit to meet the following criteria:

  1. I don't want the arrow buttons (a.k.a. "spin buttons") to show up, since I think they are unnecessary clutter.
  2. I want the number keyboard to show up on any device without a physical keyboard, or at least on recent iOS and Android devices. The normal text keyboard is full of unnecessary clutter.
  3. I do not want the validation behavior for number inputs built into recent versions of Firefox (red border, tooltip). I am planning to use my own validation, or maybe do without it.
  4. I would prefer to avoid any browser-specific hacks.

This is what I tried and why my attempts were disappointing:

  • First, I tried using <input type="number">. The arrow buttons showed up in Firefox on my Mac. I managed to disable Firefox's validation by setting an input event handler on the input with the line this.setCustomValidity(" ").
  • Next, I tried doing some research and found this question. It mentioned a bunch of stuff that looked like it would only work on Webkit. I didn't actually try it.
  • Next, I tried using a text input (<input type="text">) with the pattern attribute set to [0-9*]. According to this answer, that should make the number keyboard come up. It did that in iOS, but not in Android.

I know about the inputmode attribute that is meant for this purpose, but it doesn't seem to be supported at all.

Does anyone know of a way to implement a sane cross-browser number input? Is what I am asking for unreasonable?

Elias Zamaria
  • 96,623
  • 33
  • 114
  • 148
  • make a simple gui with 10 buttons and don't use any of these browser/platform specific "features" (it would probably be easier to implement yourself than all the research, it's 10 buttons, and a binding to number input for keyboards. 10 minutes of coding. 10 minutes of styling.) – Winchestro Jul 02 '14 at 06:58
  • Is this for an *application* in the sense that it is meant to work as programmed in JavaScript, so that you need not care about what happens when JavaScript is disabled. In that case, you could use just a `span` with `contenteditable=true`. – Jukka K. Korpela Jul 02 '14 at 07:02
  • I was thinking of making my own buttons. I was wondering if there was an easier way but if not, I may do that instead. – Elias Zamaria Jul 02 '14 at 07:05
  • @JukkaK.Korpela, I tried your idea with the span, and the regular text keyboard showed up. I am trying to get the special keyboard for number inputs, with digit buttons and little else. – Elias Zamaria Jul 02 '14 at 07:08
  • @EliasZamaria, you could make a modal dialog (consisting of digit buttons arranged somehow) appear when the `span` is clicked/tapped on. This would admittedly deviate from a native numeric keyboard (but could actually be better, since you could make it contain only the ten digits). – Jukka K. Korpela Jul 02 '14 at 07:24
  • @JukkaK.Korpela, I am thinking about that, although it may be some time before I have a chance. That sounds like reinventing the wheel, but the wheels that have already been invented don't seem to be good enough. – Elias Zamaria Jul 02 '14 at 07:36

1 Answers1

0

I had the same problem, but after a lot of trial and error found a very simple work-around: live demo.

The code: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
<style>
input[type="tel"]:invalid {
    box-shadow: none; /* 0 doesn't work */
}
</style>
</head>
<body>
    <form novalidate>
        <input type="tel">
    </form>
</body>
</html>

.
There is (just) one imperfection: on Androids, it pulls up the phone-number keypad in stead of the normal numeric keypad. But those are almost identical, and I don't think many users will notice.

The novalidate (for which novalidate="novalidate" is valid syntax as well) plus the CSS declaration might seem redundant, but there is a lot going on in browser world when it comes to form behavior, with significant interbrowser and intrabrowser inconsistencies. Have a look here, for example.

Apparently, that behavior is not yet standardized by the W3C. Therefore, I would choose redundancy over taking chances.

Community
  • 1
  • 1
Frank Conijn - Support Ukraine
  • 3,050
  • 1
  • 22
  • 29
  • I ended up doing something like that. I would have preferred the number keyboard over the phone number keyboard but this was the best I could do IMO. I have a question: do you need the `input[type="tel"]:invalid` rule or the `novalidate` attribute? I haven't noticed any validation at all on phone number inputs in any browser. – Elias Zamaria Jul 08 '14 at 20:20
  • @EliasZamaria: yes and no. At one point during the trial and error process, I noticed the same as you did: in Firefox a red border, i.e. red box-shadow, around inputs filled in incorrectly. But I don't remember what type of input I was testing at that time. Nonetheless, because the W3C form behavior specifications are scarce and/or poorly implemented, I would, like I wrote, choose redundancy over taking chances. After all, it is just 3 nanoseconds rendering time difference, and it helps to prevent having to revise the code in the future. – Frank Conijn - Support Ukraine Jul 08 '14 at 20:37