How do I send a "textbox" always to the right when it’s in focus?

Question

I have a textBox monetary value that this with 0,00, when I click to enter an example value 12345, he gets 10023,45.

I wonder how I can fix this with Javascript.

Answer 1

A simple way to solve this is, if the value is 0.00 you clear the field when there is Focus in it.

document.querySelector('input[type=text]').addEventListener('focus', function () {
    if (this.value !== '0,00') return;
    this.value = '';
}):

The same code using jQuery:

$('input[type=text]').on('focus', function () {
    if (this.value !== '0,00') return;
    this.value = '';
}):

There are other ways, you can select all the content of the field so that anything typed will overwrite it altogether, example:

document.querySelector('input[type=text]').addEventListener('focus', function () {
    this.selectionStart = 0;
    this.selectionEnd = this.value.length;
}):

Don’t forget to replace the dial input[type=text] by one that matches your code, being this with ID, class or other attributes that identify the field(s) that you want to apply the event.

Answer 2

You can use the jQuery also and use the plugin maskMoney, see an example

$("#demo3").maskMoney({prefix:'R$ ', allowNegative: true, thousands:'.', decimal:',', affixesStay: false});

Answer 3

Just use the PHP equivalent number_format() for Javascript.

$("#omeuinput").keypress(function(e) {
var valor = $(this).val();
valor = number_format(valor, 2, '.', '');
$(this).val(valor);
});


function number_format(number, decimals, dec_point, thousands_sep) {
number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
var n = !isFinite(+number) ? 0 : +number,
    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
    s = '',
    toFixedFix = function(n, prec) {
        var k = Math.pow(10, prec);
        return '' + Math.round(n * k) / k;
    };
// Fix for IE parseFloat(0.55).toFixed(0) = 0;
s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
if (s[0].length > 3) {
    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
}
if ((s[1] || '').length < prec) {
    s[1] = s[1] || '';
    s[1] += new Array(prec - s[1].length + 1).join('0');
}
return s.join(dec);
}

Answer 4

Elements html have triggers that are fired through events. In the element of your form where the monetary value will be inserted, you can configure an action to be executed every time the contents of a particular item are changed.

For this you will use the feature onChange

Javascript function to format monetary values

<script type="text/javascript">
    function formatMoney(c, d, t){
    var n = this, 
        c = isNaN(c = Math.abs(c)) ? 2 : c, 
        d = d == undefined ? "." : d, 
        t = t == undefined ? "," : t, 
        s = n < 0 ? "-" : "", 
        i = parseInt(n = Math.abs(+n || 0).toFixed(c)) + "", 
        j = (j = i.length) > 3 ? j % 3 : 0;
       return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
     };


     function formatar(){
        valor=document.getElementById("valor").value;
        valorFormatado = formatMoney(valor, '.', ',');
        document.getElementById("valor").value = valorFormatado;

     }
</script>

In your text field

    <input id="valor" type="text" onchange="formatar()">

Reference to the function formatMoney