2016-11-20 3 views
1

Numeral.jsの入力ボックスをフォーマットしてライブしたいと思います。numeric.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); 
     }); 

2番目の機能は完全に(HUF形式に)動作していますが、最初は機能しません。

答えて

0

は、私はあなたが数字言語ファイルが欠落していると思う:私は、言語のjsファイルが含まれていない場合を除き

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

は、私はあなたの状況を再現することはできません。あなたの例を試してみて、最初の入力ボックスにキーを打つ:

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

 
$('#exchangeInputFirst, #exchangeInputSecond').keyup(function(){ 
 
\t if(a == false){ 
 
\t \t $(this).val(''); 
 
\t \t a = true 
 
\t } else { 
 
\t \t numeral.language($(this).data('language')); 
 
\t \t $(this).val(numeral($(this).val()).format('0,0.00$')); 
 
\t \t $(this).caret(0); 
 
\t } 
 
});
<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

ます。また、カーソル位置に問題があります。あなたがするたびに文字が次のように入力された入力のbegginingにキャレット位置を設定するには、この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')); 

は私の更新スニペットを参照してください。今はあなたが望むように動作するはずです。

+0

私は通常、最初のフィールドに数字を入力することはできませんか? https://gyazo.com/b208be037e9ad619a6d82d8d73b88975 – Adrian

+0

数値書式を適用する場合は、最初の入力 'keyup'イベントが発生しました。次に、最初のフィールドのキーを押すと、カーソルが新しく適用される文字列の最後に移動します。これは、テキスト入力が機能するためです。また、2番目の入力は、最初の入力でキーを押すまで書式を更新しません。あなたはここにいたいと思いますか? –

+0

Hmmm。入力時に入力番号を瞬時にフォーマットしたいキーアップ機能は私が探しているものではありませんか? – Adrian