Adding thousand and decimal separator in input type number

Question

I have made a long research but i have not found a similar case.

I am using jeditable plugin for a project and i needed to create an input type number

First i have created my input type number in my jquery.jeditable.js

    number: {
        element : function(settings, original) {
            var input = $('<input type="number" step="0.00">');
            if (settings.width  != 'none') { input.attr('width', settings.width);  }
            if (settings.height != 'none') { input.attr('height', settings.height); }
            /* https://bugzilla.mozilla.org/show_bug.cgi?id=236791 */
            //input[0].setAttribute('autocomplete','off');
            input.attr('number','off');
            $(this).append(input);
            return(input);
        }
    },

and then i have put the script in my html file

    $('.number').editable(function(value, settings) { 
     console.log(this);
     console.log(value);
     console.log(settings);
     return(value);
  }, { 
     type    : 'number', 
     style  : "inherit"
 });

My html

<p class="number" style="text-align: right;">000,00</p>

The problem is that i dont know how to put decimal and thousand separator working in all the browsers. As you can see above i have just put step="0.00 but this works just in FF

can you help me on how to add decimal and thousand separator working correctly?

Thanks

score 0 · Answer 1 · answered Oct 14 '12 at 10:47

0

You could try this one:

function format(comma, period) {
comma = comma || ',';
period = period || '.';
var split = this.toString().split('.');
var numeric = split[0];
var decimal = split.length > 1 ? period + split[1] : '';
var reg = /(\d+)(\d{3})/;
    while (reg.test(numeric)) {
    numeric = numeric.replace(reg, '$1' + comma + '$2');
    }
return numeric + decimal;}

$('#mydiv').live('keyup', function(){
$(this).val(format.call($(this).val().split(' ').join(''),' ','.'));
});

answered Oct 14 '12 at 10:47

GrampaRay

170
1
13

I'm trying, but actually I don't really know why the jeditable plugin doesn't respond to it. I think it is because jeditable transforms the text into a form and then back... – GrampaRay Oct 14 '12 at 11:05
ok, how do you figure it out this issue now?. I am lost and stuck, all the recommendations and suggestions are very welcome – Koala7 Oct 14 '12 at 11:12
**EDIT:** Ok, the "step" parameter seems to cause the trouble. I would just delete that parameter and let my example code handle the numbers in the frontend AFTER jeditable handled them. So just make another/edit your existing .js file and use your selectors instead of my '#mydiv'. – GrampaRay Oct 14 '12 at 11:17
That might work, yes. But why not handly your jeditable output seperatly? Just make another *new .js file and let my codeexample revisit the jeditable outbut on your '.number' class?! – GrampaRay Oct 14 '12 at 11:40
because i have also other input type in my jquery.jeditable.js, i probably doing some mistakes in editing the che code in my answer – Koala7 Oct 14 '12 at 11:49

score 0 · Answer 2 · answered Oct 14 '12 at 11:32

like this?

    number: {
        element : function format(comma, period) {
            comma = comma || ',';
            period = period || '.';
            var split = this.toString().split('.');
            var numeric = split[0];
            var decimal = split.length > 1 ? period + split[1] : '';
            var reg = /(\d+)(\d{3})/;
                while (reg.test(numeric)) {
                    numeric = numeric.replace(reg, '$1' + comma + '$2');
                    }
                return numeric + decimal;}
            var input = $('<input type="number"');
            if (settings.width  != 'none') { input.attr('width', settings.width);  }
            if (settings.height != 'none') { input.attr('height', settings.height); }
            /* https://bugzilla.mozilla.org/show_bug.cgi?id=236791 */
            //input[0].setAttribute('autocomplete','off');
            input.attr('number','off');
            $(this).append(input);
            return(input);
        }
    },



$('.number').live('keyup', function(){
$(this).val(format.call($(this).val().split(' ').join(''),' ','.'));
});

Adding thousand and decimal separator in input type number

2 Answers2