CODEWITHSUNDEEP
javascriptjqueryjquery-mask
André Gonçalves
André Gonçalves

Reputation: 97

jQuery Mask Plugin Can't start with letter 'S'

I want to use a mask to an input to start with SP and also PT. The PT input works fine, but the SP does not. Note that this is not my real code, it's just an example.

$('#partshort').mask('SP-00000000000');
$('#svpshort').mask('PT-00000000000');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <h3>Problems with jQuery Mask Plugin?</h3>
  <p>Exemplify your problem here :-)</p>
  <hr />
  <form role="form">
    <div class="form-group">
      <label for="date-field">Example 1</label>
      <input type="text" class="form-control" id="partshort">
    </div>
    <div class="form-group">
      <label for="ip-field">Example 2</label>
      <input type="text" class="form-control" id="svpshort">
    </div>
  </form>
</div>

Here is the example: http://jsfiddle.net/1wjbysnm/

Upvotes: 2

Views: 502

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337626

The issue is because the S character in the Mask library has a special meaning:

By default, jQuery Mask Plugin only recognizes the logical digit A (Numbers and Letters) and S (A-Za-z) but you can extend or modify this behaviour

https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html#translation

To fix your issue you can simply remove the S character translation so that it behaves as any standard character:

$('#partshort').mask('SP-00000000000', {
  translation: { S: null }
});
$('#svpshort').mask('PT-00000000000');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="container">
  <h3>Problems with jQuery Mask Plugin?</h3>
  <p>Exemplify your problem here :-)</p>
  <hr />
  <form role="form">
    <div class="form-group">
      <label for="date-field">Example 1</label>
      <input type="text" class="form-control" id="partshort">
    </div>
    <div class="form-group">
      <label for="ip-field">Example 2</label>
      <input type="text" class="form-control" id="svpshort">
    </div>
  </form>
</div>

Upvotes: 2

Related Questions