Adding special characters to number input

Question

I'm trying to create a HTML duration(not time of day) input field, ie HH:MM, and I would like it to trigger the numeric keyboard on mobile devices.

<input type="number" /> appears to be the only reliable way to make this happen. But I require it to accept colons : .

Is there a way to force the number input field accept additional special characters?

Answer 1

As far as I know, it's not possible. As you need the numeric keyboard on mobile device along with : is not native at all. There is just no : key in the keyboard, nothing you can do about it.

Just use <input type=time> and you can make magic happen nicely on mobile device. If you need the user to type in, use number or text , and add additional pattern property to perform the validation. Or use something like jQuery validation plugin to perform just in time validation.

Answer 2

Try for HH:MM entry and H:MM entry

<EditText>
     android:digits="1234567890:"
     android:inputType="textNosuggestions" 
     android:minLength="4"
     android:maxLength="5"/>

If you want to prevent users from entering time like "91:87", or ":36" or ":3:4" and all such variations then you would have to use a TextWatcher like this edistext.addTextChangedListener(new TextWatcher(this));