numeral.js live formatting

Question

I would like to live format an input box with Numeral.js.

I tried something like this.

    $('#exchangeInputFirst').keyup(function () { 
//eur formatting
            numeral.language('sk');
            $('#exchangeInputFirst').val(numeral($('#exchangeInputFirst').val()).format('0,0.00$'); 

//to HUF format            $('#exchangeInputSecond').val($('#exchangeInputFirst').val()*$('#first').html());
            numeral.language('hu');
            var string = numeral($('#exchangeInputSecond').val()).format('0,0.00$'); 
            $('#exchangeInputSecond').val(string);
        });

The second function is working perfectly (to HUF format), but the first not.

Christos Lytras · Answer 1 · 2016-11-20T17:57:10.693

I think you are missing the numeral language file:

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/languages.min.js"></script>

I cannot reproduce your situation unless I do not include the languages js file. Try your example and hit a key on the first input box:

var a = false;
$('#exchangeInputFirst, #exchangeInputSecond').click(function () {
 $(this).caret(0);
});

$('#exchangeInputFirst, #exchangeInputSecond').keyup(function(){
 if(a == false){
  $(this).val('');
  a = true
 } else {
  numeral.language($(this).data('language'));
  $(this).val(numeral($(this).val()).format('0,0.00$'));
  $(this).caret(0);
 }
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/numeral.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/languages.min.js"></script>
<script src="http://zikro.gr/dbg/html/jquery.caret/dist/jquery.caret-1.5.2.min.js"></script>


<input type="text" data-language="sk" id="exchangeInputFirst">
<input type="text" data-language="hu" id="exchangeInputSecond">

UPDATE

You also have a problem with the cursor position. You can solve this by using this jQuery plugin acdvorak/jquery.caret to set the caret position to the beggining of the input each time characters are typed like this:

$(this).val(numeral($(this).val()).format('0,0.00$'));
$(this).caret(0);

Also, I have included the language in input's data like data-language="sk" and now you can read it directly in the keyup event like this:

numeral.language($(this).data('language'));

See my updated snippet. It should now works as you want.

strange, I can't normally enter numbers into first field? https://gyazo.com/b208be037e9ad619a6d82d8d73b88975 — Adrian, Nov 20 '16 at 17:24
When you want the number formatting to apply? You have it triggered to the first input `keyup` event. Then when you hit keys on the first field, the cursor goes at the end of the newly applies string, because that's how text inputs are working. Also the second input does not update the formatting until you hit keys on the first input. What exact behavior you want to have here? — Christos Lytras, Nov 20 '16 at 17:32
Hmmm. I want to format input number instantly, when I type. Not the keyup function is what I am looking for? — Adrian, Nov 20 '16 at 17:37

numeral.js live formatting

1 Answers1