How to fill in a numerical field as in internet banking (right to left)?

Asked

Viewed 7,499 times

15

At Atms and internet banking sites there are numerical fields that when you type they are filled from right to left, increasing the number as you type, for example:

+-----+--------------+
|tecla|valor do campo|
+-----+--------------+
|     | 0,00         |
|  1  | 0,01         |
|  2  | 0,12         |
|  3  | 1,23         |
|  4  | 12,34        |
|  5  | 123,45       |
|  6  | 1.234,56     |
+-----+--------------+

What is the Javascript solution for doing this?

javascript jquery html html5
  • 3

    Since you put jQuery in the question, take a look at this plugin: https://github.com/plentz/jquery-maskmoney

  • In the example I see the characters being inserted from left to right. Vc refers to aligning the value on the right and inserting the comma/dot?

  • @Guilhermebernal It would be that too, but the main thing is that as the number changes, I will edit the question to be clearer. The question is to fill in the left to the right as the person is typing, in a normal field if the person type 12, comes out 12, this would come out 0,12.

3 answers

5


Try using this function to set the coin mask:

function MascaraMoeda(objTextBox, SeparadorMilesimo, SeparadorDecimal, e){
    var sep = 0;
    var key = '';
    var i = j = 0;
    var len = len2 = 0;
    var strCheck = '0123456789';
    var aux = aux2 = '';
    var whichCode = (window.Event) ? e.which : e.keyCode;
    if (whichCode == 13) return true;
    key = String.fromCharCode(whichCode); // Valor para o código da Chave
    if (strCheck.indexOf(key) == -1) return false; // Chave inválida
    len = objTextBox.value.length;
    for(i = 0; i < len; i++)
        if ((objTextBox.value.charAt(i) != '0') && (objTextBox.value.charAt(i) != SeparadorDecimal)) break;
    aux = '';
    for(; i < len; i++)
        if (strCheck.indexOf(objTextBox.value.charAt(i))!=-1) aux += objTextBox.value.charAt(i);
    aux += key;
    len = aux.length;
    if (len == 0) objTextBox.value = '';
    if (len == 1) objTextBox.value = '0'+ SeparadorDecimal + '0' + aux;
    if (len == 2) objTextBox.value = '0'+ SeparadorDecimal + aux;
    if (len > 2) {
        aux2 = '';
        for (j = 0, i = len - 3; i >= 0; i--) {
            if (j == 3) {
                aux2 += SeparadorMilesimo;
                j = 0;
            }
            aux2 += aux.charAt(i);
            j++;
        }
        objTextBox.value = '';
        len2 = aux2.length;
        for (i = len2 - 1; i >= 0; i--)
        objTextBox.value += aux2.charAt(i);
        objTextBox.value += SeparadorDecimal + aux.substr(len - 2, len);
    }
    return false;
}

To use it just call in the input:

<form>
    Valor R$: <input type="text" name="valor" onKeyPress="return(MascaraMoeda(this, '.', ',', event))">
</form>

4

I tested both responses from @Denisbernardo and of @bfavaretto (maskMoney plugin) and found some small differences. For example:

  • Using the jQuery plugin, when the field content is deleted with the key DELETE the value is changed to "0,00", while in the other solution it is empty.

  • When selecting the whole field and pressing any number, the jQuery plugin replaces the content with the new number typed, while the function just adds it to the end of the current value.

These are minor differences, but we can say that the advantage of the solution in Javascript is independence, however maskMoney is more flexible (has many options) and easy to apply, since it is possible to use a CSS selector to include all the fields of a form at once:

$('#moeda').maskMoney({ thousands: '.', decimal: ',' });

0

You can do it with this script:

<script type="text/javascript">

    /* Máscaras ER */
    function mascara(o,f){
        v_obj=o
        v_fun=f
        setTimeout("execmascara()",1)
    }

    function execmascara(){
        v_obj.value=v_fun(v_obj.value)
    }

    function mvalor(v){
        v=v.replace(/\D/g,"");
        v=v.replace(/(\d)(\d{8})$/,"$1.$2");
        v=v.replace(/(\d)(\d{5})$/,"$1.$2");

        v=v.replace(/(\d)(\d{2})$/,"$1,$2");
        return v;
    }

</script>

And call in html:

FIELD:

I believe it takes what you need.

Browser other questions tagged javascript jquery html html5

You are not signed in. Login or sign up in order to post.