How to fill a numeric field like in internet banking (from right to left)?

Navigation
15

In ATMs and internet banking websites there are numeric 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?

    
asked by anonymous 13.01.2014 / 18:27

3 answers

5

Try using this feature to set the currency 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>
    
13.01.2014 / 18:40
4

I tested both Answers from @DenisBernardo and from @ bfavaretto ( maskMoney plugin ) and found some minor differences. For example:

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

  • When you select the entire field and press any number, the jQuery plugin replaces the content with the new number entered, while the function only adds it to the end of the current value.

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

$('#moeda').maskMoney({ thousands: '.', decimal: ',' });
    
13.01.2014 / 19:06
0

What to do 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 that it meets what you need.

    
10.03.2015 / 21:19
Fork in Windows Difference between normal request / response, long-polling, websockets, WebRTC and Server-Sent Events?