Keydown event issue on HTML textbox

Question

I have a field that accepts the year, so I have created

input type="number"

and implemented keydown event to restrict user to enter more than 4 digits.

Now I'm facing an issue and need help in figuring out the logic. Following is the case:

Enter 4 digits in the textbox
Select entered text using SHIFT + Arrow Keys

Now if you type a number it should replace the data but since I have barred it, it will not. Need to cover this case.

Also find code in following JSFiddle.

I also have lot of css and validation on input[type=number], so cannot change to input[type=text].

Also same form is used on mobile devices, and when user selects textbox, numeric keyboard should appear.

Edit 1

while searching for option, I found a JSfiddle that could direct us to right direction. Issue here also is input[type=number] does not support selection property. Reference

As an alternative, we have decided to move to input[type=tel]. This would work in similar fashion, but will allow us to use maxLength attribute. Still if anyone has a better way, please share.

MaxLength attribute does not work for input[type=number] [reference](http://stackoverflow.com/questions/8354975/how-to-add-maxlength-for-html5-input-type-number-element) — Rajesh, Sep 07 '15 at 13:25
The question you reference looks like a duplicate of your question. — dramzy, Sep 07 '15 at 13:30
@RespectMyAuthoritah I'm sorry if its duplicate. I tried to search but I guess my search was not good enough. Can you kindly share the link? Thanks — Rajesh, Sep 07 '15 at 13:36
Also @RGraham I have added a reference for a jsfiddle link. For your reference http://jsfiddle.net/5a0kh9np/ — Rajesh, Sep 07 '15 at 13:36
You could try saving in a variable the current value of the input when the user press a key, and let the user change it. Then, check: if the new value has more than 4 digits, replace it with the previous one(this happens inmediately so the user won't notice it), — pablito.aven, Sep 07 '15 at 13:38
@pablito.aven I have considered this as my last resort option. Allow 5 digits and strip 5th digit on blur event. This might cover few more cases, but still its a work around. Was thinking a way to solve it in a proper way. — Rajesh, Sep 07 '15 at 13:53
@Rajesh But doing that way, if the user has four digits and inserts a new one in the middle it fails. What I said is a quite clean workaround — pablito.aven, Sep 07 '15 at 14:02
@Rajesh I have updated my answer to support `tel` and not allow non-numerical characters. — rybo111, Sep 07 '15 at 15:59

score 0 · Answer 1 · answered Sep 07 '15 at 13:26

0

May be this will work , you can use the Regular Express to validate only number and

^[0-9\.\-\/]+$

and also you can use the .length method to insure that you have specific length

answered Sep 07 '15 at 13:26

Muhammad Usman

1,366
5
18
33

if user selects data and enters new data, it will replace it so length will not exceed. I want to allow this but unable to figure out how? – Rajesh Sep 07 '15 at 13:30
@Rajesh: for that you can use just type text if you like to do so ? – Muhammad Usman Sep 07 '15 at 15:17
If I use type text, when I open in mobile, it will open qwerty keyboard and not number keyboard. – Rajesh Sep 07 '15 at 15:27

score 0 · Answer 2 · answered Sep 07 '15 at 13:53

0

You can't submit an invalid value in this case:

<form>
  <input type=number min=0 max=9999 required />
  <input type=submit value=Submit />
</form>

answered Sep 07 '15 at 13:53

Qwertiy

19,681
15
61
128

Yup it wont. but it allows user to enter any number of text, which I dont want. – Rajesh Sep 07 '15 at 13:57
@Rajesh, no. If browser supports validation, it won't pass invalid value to your script - you'll get undefined or an empty string. If you are not sure that brouser supports number inputs, you can add `maxlength=4` attribute - it is supported for a long time for text inputs, but is ignored on numeric. – Qwertiy Sep 07 '15 at 14:01

rybo111 · Accepted Answer · 2015-09-07T16:14:39.903

0

HTML:

<input type="tel" class="year" maxlength="4" data-temp="">

jQuery:

$(document).on('input', '.year', function(){
    var txt = $(this).val();
    if(isNaN(txt) || txt > 9999){
        $(this).val( $(this).data('temp') );
        return;
    }
    $(this).data('temp', txt);
});

JSFiddle

edited Sep 07 '15 at 16:14

answered Sep 07 '15 at 13:58

rybo111

12,240
4
61
70

Where do you need jQuery code in addition to maxlength? Are there any browsers wich support `type=number` but do not support `min` and `max`? – Qwertiy Sep 07 '15 at 14:03
And this is a bad way as when you assign a old value you move the cursor to the end of input regardless where it was before. – Qwertiy Sep 07 '15 at 14:05
@Qwertiy min and max are supported but they do not restrict user from entering values out of range. Also as I have mentioned, I will strip last digit and not revert to previous value. – Rajesh Sep 07 '15 at 14:33
As bad way I ment cursor moving. It's logical if it keeps its place. No objections against maxlength. And about brouser support: I asked if there are browsers wich DO support NUMBER and DON'T support MIN/MAX at the same time. You wrote only about min/max support. – Qwertiy Sep 07 '15 at 14:34
@Rajesh, any change of the value will move the cursor, so maybe it would be better to do such things on `blur`? – Qwertiy Sep 07 '15 at 14:35
@Qwertiy You are right and even I considered to do same. Also I dont have answer to your question "if there are browsers wich DO support NUMBER and DON'T support MIN/MAX at the same time" but i guess there aren't any but not sure. and thanks. – Rajesh Sep 07 '15 at 14:44
@Rajesh, my gess is the same, but I don't know. – Qwertiy Sep 07 '15 at 14:49
There is a row with digits on the keyboard - you don't handle keys from it. – Qwertiy Sep 07 '15 at 15:21
Fix: `$(this).val().length == 4 && (e.keyCode > 95 && e.keyCode < 106 || e.keyCode > 47 && e.keyCode < 58)` - http://jsfiddle.net/5a0kh9np/5/ – Qwertiy Sep 07 '15 at 15:27
I can still type `88eeeee88` :) – Qwertiy Sep 07 '15 at 15:28
@Qwertiy Since `type="number"` allows `e`, `-` and `.` (and Chrome overrides this -- try it with your solution) I think it's best to just use `type="tel"` instead. I have shortened my answer significantly with this change. – rybo111 Sep 07 '15 at 15:58
You can prevent `e`, `-` and `.`. Anyway, they are processed correcty when `min` and `max` are specified. And I still think, that it is a bad idea to manipulate with input while user is typing something. About tel - as I remember the keyboard on mobile device will differ for `number` and `tel`. – Qwertiy Sep 07 '15 at 16:28
Care to elaborate on preventing `e`? Other than using delays. Chrome manipulates to allow `e`. What's the bad idea here? As far as keypads for `number` and `tel` - both have extra buttons so it makes no difference. There is no"just number" keypad. – rybo111 Sep 07 '15 at 17:34

score 0 · Answer 4 · answered Sep 08 '15 at 07:30

So I have moved my code to input[type=tel] and Updated JSFiddle

If you check, I have added 2 events

Keydown to restrict from entering any invalid key.
Blur event to check if entered value is number only or not.

Now you might be thinking, if I have already restricted user to enter only number, how can he enter incorrect value.

Explanation

In my implementation, I have used keydown and using keycode, I'm allowing/blocking. Interesting case is when user press and holds shift key. Now on keydown, I get same keycode but value is different(A special character). So checking the integrity on blur.

A better way would have been handling keypress and keydown together and I'll update fiddle and update my answer, but for now I guess this has solved my problem.

Thanks you all for all comments/answer. Also kindly let me know if there are any better ways to implement.

Keydown event issue on HTML textbox

Edit 1

4 Answers4

Explanation

Linked