asp.net mvcのRTL入力を使用した通貨/小数点入力

Question

5.00や500.00などの金額のテキストボックスを作成しようとしています。ユーザーが5を入力すると、その値テキストボックスには0.05が表示され、ユーザーが500を入力するとテキストボックスの値に5.00が表示されます。私は現在、999999.99の入力と000000.00として表示するためのゼロのプレースホルダーを許可するために、テキストボックスにマスクを持っています。私もCSSの方向をrtlに設定していますが、それはうまくいきません。ユーザーはまだ法線方向を入力していますが、すべてが今すぐ右揃えされていますが、これは私が行っていないものです。

私はいくつかの解決策を探してみましたが、幸運はありませんでした。このタイプの入力を実現するために利用できるものはありますか？私が見つけたもののほとんどは、ヘブライ語などの特定の言語を表示するためのもので、小数点固定値の入力を処理するためのものを探しています。ここで

は私のJavascriptを

@section scripts{ 
<script src="~/Scripts/jquery.maskedinput.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $('form :input:visible:enabled:first').focus(); 
    $('#check_checkAmount').mask('999999.99', { placeholder: "000000.00" }); 
    $('#check_checkAmount').css('direction', 'rtl'); 
</script> 
} 

であり、ここで今のよう

@Html.TextBoxFor(model => model.check.checkAmount, new { @class = "form-control" }) 

制御の私のHTMLは、ユーザーが5それを入力した場合、それはあなたが上記を参照のコードで動作する方法であります私が望むように000000.05ではなく500000.00を表示します。 css direction = rtlを追加すると、テキストボックスの配置が右に変更されました。私は必ずしもテキストボックスを右揃えにする必要はありません。ちょうどその値を右から左に入力する必要があります。

また、プレースホルダが ""で同じコードを試しましたが、どちらも動作しません。差があればそれは意味をなさないだろうが、それは価値があった。笑。

ありがとうございました。

Answer 1

私は必要な結果を私に提供するものを見つけることができなかったので、私は自分の望む結果を得るために自分のjavascriptを書くことに決めました。以下は私のJavaScriptコードです。私はonkeydownのリスナーを使ってテキストボックスに接続しました。

私のhtmlテキストボックス - ASP.NET MVCでidはcheck_checkAmountとして生成します：javascriptのコードは、以下のすべてのkeyUpイベントにテキストボックスの値を取り、アレイとチェックにそれを分割します

@Html.TextBoxFor(model => model.check.checkAmount, new { @class = "form-control" }) 

有効な入力のためにそれを文字単位で入力し、それに応じてフォーマットしてテキストボックスに戻します。

window.onload = function() { 
    prepareEventHandlers(); 
} 

function prepareEventHandlers() { 

    var regex = /^[0-9]+$/; 

    var currencyTxt = document.getElementById("check_checkAmount"); 
    currencyTxt.onkeyup = function() { 
     var amtSplit = currencyTxt.value.split(""); 
     var count = amtSplit.length; 

     var values = []; 

     for (var i = 0; i < (count); i++) 
     { 
      if (values.length < 1) 
      { 
      if (amtSplit[i] != 0 && amtSplit[i].match(regex)) 
      { 
       values.push(amtSplit[i]); 
      } 
      } 
      else 
      { 
      if (amtSplit[i].match(regex)) 
      { 
       values.push(amtSplit[i]); 
      } 
      }    
     } 

     var count2 = values.length; 

     switch(count2) 
     { 
     case 0: 
      currencyTxt.value = '0.00'; 
      break; 
     case 1: 
      currencyTxt.value = '0.0' + values[0]; 
      break; 
     case 2: 
      currencyTxt.value = '0.' + values[0] + values[1]; 
      break; 
     case 3: 
      currencyTxt.value = values[0] + '.' + values[1] + values[2]; 
      break; 
     case 4: 
      currencyTxt.value = values[0] + values[1] + '.' + values[2] + values[3]; 
      break; 
     case 5: 
      currencyTxt.value = values[0] + values[1] + values[2] + '.' + values[3] + values[4]; 
      break; 
     case 6: 
      currencyTxt.value = values[0] + ',' + values[1] + values[2] + values[3] + '.' + values[4] + values[5]; 
      break; 
     case 7: 
      currencyTxt.value = values[0] + values[1] + ',' + values[2] + values[3] + values[4] + '.' + values[5] + values[6]; 
      break; 
     case 8: 
      currencyTxt.value = values[0] + values[1] + values[2] + ',' + values[3] + values[4] + values[5] + '.' + values[6] + values[7]; 
      break; 
     default: 
      currencyTxt.value = values[0] + values[1] + values[2] + ',' + values[3] + values[4] + values[5] + '.' + values[6] + values[7]; 
      break; 
     } 
    } 
} 

あなたも、このようなonBlurイベントなど、いくつかの他のリスナーに追加して、あなたのテキストボックスの値は、次のような正規表現パターンに一致することを確認できます。

var regex = /^[0-9]{1,3}[,][0-9]{3}[.][0-9]{2}|[0-9]{1,3}[.][0-9]{2}/; 

これは、マウスで任意の貼り付けをキャッチに役立ちますしかし、フォーカスが失われてしまわないような例がいくつか見受けられましたので、私の提案と私がしようとしているのは、サーバーにポストバックしてから再度データを検証することですが、上記のJavascript部分は、ほとんどのエラーを緩和するはずです。