Percentage Mask

Question

I need a percentage mask with the library jQuery Mask Plugin v1.5.4.

What I am trying to do is that the user can report a value from -99.99 to 99.99.

I’m trying like this:

$("#edtPercentual").mask("99,99%");

$("#edtPercentual").on("blur", function() {
    var value = $(this).val().length == 1 ? $(this).val() + '%' : $(this).val();
    $(this).val( value );
});

As you can see, it’s not about much. How do I manage to put negative and also how do I show the "%" in any situation, the code above does not show the percentage when the value has two (2) decimal places.

Answer 1

Using the basis of @Lucascosta’s reply, I switched to the form I needed:

• Removed % of mask and assigned to Blur and Focus triggers

$('.numero').mask('Z#9V##', {
    translation: {
		'Z': {
		  pattern: /[\-\+]/,
		  optional: true
		},
		'V': {
		  pattern: /[\,]/
		},
		'#': {
		  pattern: /[0-9]/,
		  optional: true
		}
	}
});

$(".numero").on('blur',function(){
	if($(this).val().length > 0)
	   $(this).val( $(this).val() + '%' );
}).on('focus',function(){
	  $(this).val( $(this).val().replace('%','') ); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.3/jquery.mask.min.js"></script>

<input class="numero" />

Answer 2

You can use the Translate:

$('.numero').mask('Z99,99%', {
  translation: {
    'Z': {
      pattern: /[\-\+]/,
      optional: true
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.3/jquery.mask.min.js"></script>

<input class="numero" />

Answer 3

An alternative would be to do so:

jQuery(function($){
  $("#edtPercentual").keyup(function() {
    //Obter o primeiro caractere digitado
    var temp = $(this).val().charAt(0);
    //Verificar se o primeiro caractere inserido é '-'
    if (temp == '-'){
        //Aplica a máscara para números negativos
        $("#edtPercentual").mask("-99,99%");
    }
    //Verificar se o primeiro caractere inserido é número
    else if (temp.charAt(0).match(/\d/)){
        //Aplica a máscara para números positivos
        $("#edtPercentual").mask("99,99%");
    }
    //Caso o primeiro caractere inserido seja um caractere inválido limpa o value do campo
    else {
       $("#edtPercentual").val('');
    }
  });  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.3/jquery.mask.min.js"></script>
Percentual <input type="text" id="edtPercentual">

Answer 4

I found this way here to do using Mask Jquery:

$('#percent').mask('##0,00%', {reverse: true});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.js"></script>

<input type="text" id="percent"/>