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)

Answer 1

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

1. Since, on the keyup event, the input has already changed, you must change it to a keydown or keypress event.

2. Change value.replace(",", ".") to value + "." (since there will be no ",").

3. 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.