javascript - numeric.js 实时格式化

Question

我想使用 Numeral.js 实时格式化输入框。

我尝试过类似的事情。

    $('#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);
        });

第二个函数工作正常(HUF 格式)，但第一个函数不行。

Answer 1

我认为您缺少数字语言文件:

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

除非我不包含语言 js 文件，否则我无法重现您的情况。尝试您的示例并在第一个输入框中按一个键:

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">

更新

您的光标位置也有问题。您可以使用这个 jQuery 插件 acdvorak/jquery.caret 来解决这个问题每次键入字符时将插入符号位置设置为输入的开头，如下所示:

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

此外，我已将语言包含在输入数据中，例如 data-language="sk"，现在您可以直接在 keyup 事件中读取它，如下所示:

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

查看我更新的代码片段。现在它应该可以按照您的要求工作了。