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, Nov 23 '12 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, Nov 26 '12 at 16:03

score 3 · Answer 1 · edited Nov 25 '13 at 10:57

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 '13 at 10:57

Hamad

5,096
13
37
65

answered Nov 25 '13 at 10:35

Chieleman

83
5

Found a solution: http://stackoverflow.com/questions/1064089/inserting-a-text-where-cursor-is-using-javascript-jquery – Micah May 06 '14 at 21:06

score 1 · Answer 2 · answered Nov 23 '12 at 16:55

1

Maybe your document isn't already ready:

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

answered Nov 23 '12 at 16:55

Luca Davanzo

21,000
15
120
146

1

the OP specifically states "***The event is well fired, but..***" – Gabriele Petrioli Nov 24 '12 at 13:59

itsme · Answer 3 · 2012-11-27T13:11:46.967

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 '12 at 13:11

answered Nov 23 '12 at 16:42

itsme

48,972
96
224
345

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). – pHneutre Nov 27 '12 at 08:53
try now please, then i really suggest you to update you jQuery vers. – itsme Nov 27 '12 at 10:51
@pHCito fixed now sorry for delay ;) – itsme Nov 27 '12 at 12:53
No matter if using .keypress, .keyup, .keydown, .bind(press/up/down), .live(press/up/down). Same behaviour. – pHneutre Nov 27 '12 at 13:30
@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!! – itsme Nov 27 '12 at 13:31
Frankly, I don't know what to say. Your jsFiddle doesn't work on my side. It gets blank when pressing dot, I assure you. (I'm using 1.6.4 as you set the fiddle) – pHneutre Nov 27 '12 at 14:09
@pHCito so strange i think you have problems on your side, browser or somenthing else, for me it works perfectly, me i'm on mac + FF, don't know about you – itsme Nov 27 '12 at 14:38
I am a bit late, sorry. But it is the keycode for NumPad "." – Fortin Aug 28 '14 at 17:37

score 0 · Answer 4 · answered Nov 23 '12 at 16:43

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 '12 at 16:43

James McDonnell

3,600
1
20
26

score 0 · Answer 5 · answered Nov 23 '12 at 16:46

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 '12 at 16:46

Cornel

4,652
15
48
57

1

It will work for input `type=text` but OP is using input `type=number`. – Muthu Kumaran Nov 23 '12 at 16:55

score 0 · Answer 6 · answered Nov 11 '14 at 15:14

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 '14 at 15:14

user4240171

11

This doesn't work as val() doesn't return anything in a number of browsers if the input is invalid... – bert bruynooghe Feb 23 '15 at 10:12

jQuery: modifying input value on keypress

6 Answers6