jQuery: modifying input value on keypress

Question

Whenever a dot '.' is typed in my input (type=number) field, I want it replaced by a comma ','.

$(box).find('input[type=number]').keypress(function(evt){
        if(evt.which==46){
            $(this).val($(this).val()+',');
            evt.preventDefault();
        }
    });

The event is well fired, but instead, the field gets totally empty. What's wrong?

EDIT

The reason why I'm doing this is that Chrome (latest version), contrary to the HTML5 recommandation, use comma and discard dot in input type=number. I'm currently only developing for Chrome cause I can't test my app somewhere else for the moment. Any comment on this (abnormal ?) situation would be appreciated.

input type="number" will not accept comma ,. You may have to change input type=text — Muthu Kumaran
– Muthu Kumaran, Commented Nov 23, 2012 at 16:51
@MuthuKumaran : actually that's what W3C says about type=number, but Chrome on the contrary only accepts commas, and delete dots and anything coming afterwards. That's why I wanted to do this in the first place. — pHneutre
– pHneutre, Commented Nov 26, 2012 at 16:03

Hamad · Accepted Answer · 2013-11-25 10:57:52Z

3

$(this).val($(this).val() + ',');

This might work if you are typing and always want to put the ',' sign at the end of the text. But what if you put the cursor in the middle of the text and then press a '.' sign?

edited Nov 25, 2013 at 10:57

Hamad

5,15013 gold badges39 silver badges65 bronze badges

answered Nov 25, 2013 at 10:35

Chieleman

935 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Micah Over a year ago

Found a solution: stackoverflow.com/questions/1064089/…

Luca Davanzo · Accepted Answer · 2012-11-23 16:55:07Z

1

Maybe your document isn't already ready:

jQuery(document).ready(function() {
  // your code
});

answered Nov 23, 2012 at 16:55

Luca Davanzo

21.6k15 gold badges124 silver badges152 bronze badges

1 Comment

Gabriele Petrioli Over a year ago

the OP specifically states "The event is well fired, but.."

James McDonnell · Accepted Answer · 2012-11-23 16:43:40Z

0

You could just use a substring like so:

str.substring(0,str.length - 1) + ','

However this is probably not an ideal solution.

answered Nov 23, 2012 at 16:43

James McDonnell

3,7101 gold badge23 silver badges26 bronze badges

Comments

Cornel · Accepted Answer · 2012-11-23 16:46:51Z

0

Your code seems to work while running it on jsfiddle:

$(document).find('input').keypress(function(evt){ 
        if(evt.which==46){
            $(this).val($(this).val()+',');
            evt.preventDefault();
        }
    });

http://jsfiddle.net/cornel_gav/cDE3L/

answered Nov 23, 2012 at 16:46

Cornel

4,73915 gold badges51 silver badges58 bronze badges

1 Comment

Muthu Kumaran Over a year ago

It will work for input type=text but OP is using input type=number.

Filippo oretti · Accepted Answer · 2012-11-27 13:11:46Z

0

here we are my friend, don't know why, it seems the useful keycode is 190 instead of 110.

try :

$(document).ready(function(){

     $(document).find('input[type=number]').live('keydown',function(evt){
            if(evt.which == 190){
                $(this).val($(this).val()+",");
                evt.preventDefault();
            }
        });

});

and this for a live preview http://jsfiddle.net/RTEcJ/8/

take a look at keycodes and you can try in the input to check which is the keycode you need: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

edited Nov 27, 2012 at 13:11

answered Nov 23, 2012 at 16:42

Filippo oretti

50k96 gold badges230 silver badges351 bronze badges

8 Comments

pHneutre Over a year ago

I'm using jQuery 1.6, on() won't work. More importantly, with keyup, evt.which matches the keycode and not the charcode. Instead of 46, it will be 110 for numpad dot, and others for other ways to do it (depending on keyboard mapping).

Filippo oretti Over a year ago

try now please, then i really suggest you to update you jQuery vers.

Filippo oretti Over a year ago

@pHCito fixed now sorry for delay ;)

pHneutre Over a year ago

No matter if using .keypress, .keyup, .keydown, .bind(press/up/down), .live(press/up/down). Same behaviour.

Filippo oretti Over a year ago

@pHCito can you tell me the jquery version you are using? did you checked the jsfiddle? if you want to replace points with commas when writing down in the text input, it works greatly!!

|

user4240171 · Accepted Answer · 2014-11-11 15:14:10Z

0

To make the char replacement work at any cursor position, you could bind to the keyup event and replace the already inserted Character in this.val().

$(document).on('keyup','.myField"]', function(e,i){
    if(e.keyCode==107)
    {
        var start = this.selectionStart,
            end = this.selectionEnd;
        $(this).val($(this).val().replace(/\+/,'|'));
        this.setSelectionRange(start, end);
    }
});

answered Nov 11, 2014 at 15:14

user4240171

11

1 Comment

bert bruynooghe Over a year ago

This doesn't work as val() doesn't return anything in a number of browsers if the input is invalid...

Collectives™ on Stack Overflow

jQuery: modifying input value on keypress

6 Answers 6

1 Comment

1 Comment

Comments

1 Comment

8 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

Comments

1 Comment

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related