title: Is it possible to add a suffix to a jQuery mask?
body: <p>I'm using Igor Escobar's jQuery mask plugin (<a href="https://github.com/igorescobar/jQuery-Mask-Plugin" rel="nofollow">https://github.com/igorescobar/jQuery-Mask-Plugin</a>) and I'm trying to add a suffix to a mask to show a <code>%</code> sign at the end of the input value.</p>
  
  <p>The application I'm building is for Brazilian users, then I have to use this number format: <code>000.000,00</code>. Where <code>,</code> (comma) is the decimal separator and <code>.</code> (dot) is the thousand separator.</p>
  
  <p>I wrote the following code to apply the mask, not yet appending the <code>%</code> sign at the end of it.</p>
  
  <pre><code>$('.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 &lt;= precision) {
                  while (val.length &lt; 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;
          }
      });
  });
  </code></pre>
  
  <p>This mask works perfectly.</p>
  
  <p>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 <code>keyup</code> handler, and finally append it again before return the value. I basically changed these lines:</p>
  
  <pre><code>var mask = '#.##0,' + (new Array(precision + 1).join('0')) + '%';
  
  var val = this.value.replace('%', '');
  
  this.value = val + '%';
  </code></pre>
  
  <p>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.</p>
  
  <p>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?</p>