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 mas 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 ma char. The ma char is moved to the right and when the input box loses focus, the ma is removed (Probably since the ma char isn't allowed in type=number)

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 mas 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 ma char. The ma char is moved to the right and when the input box loses focus, the ma is removed (Probably since the ma char isn't allowed in type=number)

• javascript
• jquery
• appjs

• 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 Commented Aug 17, 2014 at 20:04

3 Answers 3

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.

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(",", ".");
};

        $("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 + ".");
                }
            }
        });