Is it possible to add a suffix to a jQuery mask?

Question

I'm using Igor Escobar's jQuery mask plugin (https://github.com/igorescobar/jQuery-Mask-Plugin) and I'm trying to add a suffix to a mask to show a % sign at the end of the input value.

The application I'm building is for Brazilian users, then I have to use this number format: 000.000,00. Where , (comma) is the decimal separator and . (dot) is the thousand separator.

I wrote the following code to apply the mask, not yet appending the % sign at the end of it.

$('.mask-decimal').each(function () {
    var $self = $(this);
    var precision = parseInt($self.data('precision'), 10) || 2;
    var mask = '#.##0,' + (new Array(precision + 1).join('0'));
    $self.mask(mask, {
        reverse : true,
        maxlength : false
    });
    $self.on('keyup', function () {
        var val = this.value;
        if (val) {
            if (val.length <= precision) {
                while (val.length < precision) {
                    val = '0' + val;
                }
                val = '0,' + val;
            } else {
                var parts = val.split(',');
                parts[0] = parts[0].replace(/^0+/, '');
                if (parts[0].length === 0) {
                    parts[0] = '0';
                }
                val = parts.join(',');
            }
            this.value = val;
        }
    });
});

This mask works perfectly.

What I tried to do was add the percent symbol at the end of the mask, then remove it just in the beginning of my keyup handler, and finally append it again before return the value. I basically changed these lines:

var mask = '#.##0,' + (new Array(precision + 1).join('0')) + '%';

var val = this.value.replace('%', '');

this.value = val + '%';

After change that, I can input a value in the field, but I can't clear/change it using backspace. If I'm fast enough I can select the entire content and delete it, but it's an awful solution for regular users. It happens this way because the cursor stays always at the end of the input and the keyup event is triggered very quickly.

With that in mind, there is a way to move the cursor to a specific position inside the input? Does somebody can see another way to change my function so the user can use the backspace to clear the input contents?

Answer 1

If this is for an input field and the % sign is just for decoration, you could position a span containing the symbol above the input. Because it's purely a display item, right? Or you could have the sign after the input.

There's absolutely no need to have it in the input if the user's not supposed to be able to edit it. It's counterintuitive both for the user and for your logic.

Here I put the sign inside a label just so that clicking it will activate the input field.

label, input {
  font-size:18px;
  font-family:sans-serif;
}

label {
  margin-left:-24px;
}

input {
  text-align:right;
  padding-right:24px;
}

<input type="text" id="number" value="123">
<label for="number">%</label>