Currency/Decimal Input with RTL input in asp.net mvc

Question

I am trying to create a textbox for a dollar amount such as 5.00 or 500.00 and the way I would like it to work is if the user types in 5, the value in the textbox will display 0.05 and if the user types in 500 the value in the textbox will display 5.00. I currently have a mask on the textbox to allow 999999.99 input along with a placeholder of zeros for display as 000000.00. I also have css direction set to rtl, but it doesn't work the way it should. The user is still inputting normal direction, everything is just now right aligned which isn't what I was going for.

I tried searching for some solutions, but have had zero luck. Is there anything available to achieve this type of input? Most of what I found is for displaying of certain languages such as Hebrew and I'm just looking for something to handle the input of a decimal fixed value.

Here is my 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>
}

And here is my html of the control

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

As of right now the way it works with the code you see above if the user enters 5 it will display 500000.00 and not 000000.05 like I want. Adding the css direction = rtl it did change the textbox alignment to right. I don't necessarily need the textbox to align to right, I just need to be able to input the value from the right to the left.

I also tried the same code above with the placeholder being "" and that doesn't work either. It wouldn't make a ton of sense if it made a difference, but it was worth a shot. lol.

Thank you so much for any help.

Answer 1

I couldn't find anything that would provide me with the results I needed, so I decided to write my own javascript to get the results I wanted. Below is my javascript code and I just hooked it up to my textbox with a listener for onkeydown.

My html textbox - with ASP.NET MVC the id will generate as check_checkAmount :

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

The javascript code below will take the value of the textbox on every keyup and split it up into an array and check it character by character for valid input and then format it accordingly and throw it back into the textbox.

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;
      }
   }
}

You could even add in a few other listeners such as onblur and make sure your textbox value matches a regex pattern such as the following :

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

This will help with catching any pasting by mouse click, however I noticed some instances where it doesn't catch every loss of focus, so my suggestion and what I am going to do is validate my data again once I post back to the server, but the Javascript portion above that creates custom input on our textbox should alleviate most errors.