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它确实将文本框对齐方式更改为右侧。我不一定需要将文本框对齐到右边，我只需要能够从右到左输入值。

我也尝试了上面相同的代码，占位符为＆＃34;＆＃34;那也不起作用。如果它有所作为，那就没有多大意义，但值得一试。大声笑。

非常感谢您的帮助。

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部分在我们的文本框上创建自定义输入应该可以缓解大多数错误。

在asp.net mvc

1 个答案: