Replacing comma with dot Char

Question

I have made a calculation app in AppJs.

Basicly it is a bunch of:

 <input type=number>

fields.

To make it more user friendly i thought i should replace All commas with dots, so that javascript can use the actual values to calculate.

I've tried doing this with this following pice of code:

$("input[type=number]").keyup(function(e){
        var key = e.which ? e.which : event.keyCode;
        if(key == 110 || key == 188){
          e.preventDefault();
          var value = $(this).val();         
          $(this).val(value.replace(",","."));
        }   
});

In explorer 9, this works as expected: see fiddle

But since App.js uses chromium i guess this is a something thats happens in chromium. How can I work around this?

This is what happens in my app: When you enter a number containing a comma char. The comma char is moved to the right and when the input box loses focus, the comma is removed (Probably since the comma char isn't allowed in type=number)

When you get the `value` of an `input type=number` but the value isn't a valid number, you get an empty string. (`""`) when you use `var value = $(this).val()` (after the input has changed, it may be blank). — soktinpk, Aug 17 '14 at 20:04

soktinpk · Accepted Answer · 2014-08-17T20:19:09.983

When you get the value of an <input type=number> but it isn't valid, then a blank string is returned. You could check this by doing this:

$("input[type=number]").keyup(function(e){
        var key = e.which ? e.which : event.keyCode;
        if(key == 110 || key == 188){
          e.preventDefault();
          var value = $(this).val(); 
          console.log(value === "");        
          $(this).val(value.replace(",","."));
        }   
});

It will print true every time. Therefore, you need to

Since, on the keyup event, the input has already changed, you must change it to a keydown or keypress event.
Change value.replace(",", ".") to value + "." (since there will be no ",").
Actually, you need to insert it where the cursor is. I'll update that when I have time.

Finished code:

$("input[type=number]").keydown(function (e) {
    var key = e.which ? e.which : event.keyCode;
    if (key == 110 || key == 188) {
        e.preventDefault();
        var value = $(this).val();
        console.log(value);
        $(this).val(value + ".");
    }
});

A better idea might be to make it <input type=text> and validate manually if you really need this feature.

Using your solution: When I try to write "1,5" when hitting the comma char the whole input gets erased resulting in only leaving the 5. I can't get my head around this! — Philip G, Aug 18 '14 at 05:42
I found the problem. For some reason the keydown event was fired multiple times. so adding e.stopImmediatePropagation(); solved the problem. Now it is working like a glove! Thanks! — Philip G, Aug 18 '14 at 07:15

score 1 · Answer 2 · answered Aug 17 '14 at 19:39

It's probably better not to mess with the actual data in the input field but reformat internally before reading, accessing the value through a getter like this:

var getInputNumber = function(inputid) {
    return $(inputid).val().replace(",", ".");
};

score 0 · Answer 3 · answered Jun 10 '15 at 10:57

        $("input").keydown(function (e) {
            var key = e.which ? e.which : event.keyCode;
            if (key == 110 || key == 188) {
                var value = $(this).val();
                if (!isNaN(value)) {
                    e.preventDefault();
                    $(this).val(value + ".");
                }
            }
        });

Replacing comma with dot Char

3 Answers3