javascript - 在 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

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

截至目前，如果用户输入 5，它与您在上面看到的代码的工作方式将显示 500000.00 而不是我想要的 000000.05。添加 css direction = rtl 它确实将文本框对齐方式更改为右对齐。我不一定需要文本框右对齐，我只需要能够从右向左输入值即可。

我还尝试了上面相同的代码，但占位符为“”，但也不起作用。如果它有所作为，那将没有多大意义，但值得一试。哈哈。

非常感谢您的帮助。

Answer 1

我找不到任何可以提供我需要的结果的东西，所以我决定编写自己的 javascript 来获得我想要的结果。下面是我的 javascript 代码，我只是将它连接到带有 onkeydown 监听器的文本框。

我的 html 文本框 - 使用 ASP.NET MVC，id 将生成为 check_checkAmount :

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

下面的 javascript 代码将在每个 keyup 上获取文本框的值并将其拆分为一个数组并逐个字符地检查它是否有效输入，然后相应地对其进行格式化并将其扔回文本框。

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 部分应该可以减少大多数错误。