Home / Questions / 17308
Accepted
Wuilmer Medrano
Asked: 2020-07-21 13:54:57 +0800 CST 2020-07-21 13:54:57 +0800 CST

Mask input text javascript

  • 772

I want to mask an input text with the following format: Aa-1234, where the 2 letters are the initials of US states, separated by a hyphen, and the 4 numbers are the 4-digit zip code: how could I do it with javascript?

javascript

3 Answers

  1. Best Answer

    Have you tried this JQuery library?

    http://digitalbush.com/projects/masked-input-plugin/

    It does exactly what you want. It doesn't validate user input, it formats the input textto enter the data with the mask you pass to it.

    In your case it would be instantiated as follows:

    $("#id_input").mask("aa-9999");
    • 4

  2. I don't quite understand what you mean by the word mask, but I think your purpose is to validate that the text provided by the user through the input has the format you want, in this case it is something like "us-1234" or "us- 2375" etc To validate that a given string meets the required format, you can use regular expressions.

    The regular expression that models the above format is as follows:

    ^us-(\d{4})$

    The above means that at the beginning of the string there must be the letter u followed by an s and a hyphen and then 4 numbers between 0-9, the end of the string is the $ sign.

    In order to use this in your application you need to use it in the following way:

     exprZip = /^us-(\d{4})$/;   //tu expresión regular
 exprZip.test(textoInput);   //pruebas la expresión regular con la cadena que leiste del input y la función regresará true o false.
    • 1

  3. In the inputyou can use the attribute patterntogether with a regular expression to ensure that the input has the format you want. The downside is that it's not supported by all browsers yet: it will work for Chrome, Firefox, Opera or IE10+, but it won't work well with Safari.

    So what you would have to do is find a regular expression that fits what you want. The idea would be something like this:

    • 2 letters (which could be any or whatever you want, but this will complicate the regular expression)
    • 1 hyphen
    • 5 digits (although in the question you say 4, US zip codes have 5 digits)

    So you could have a regular expression like this: ^[a-zA-Z]{2}-[0-9]{5}$which combined with the attribute patternwould look like this:

    <form>
  <input type="text" pattern="^[a-zA-Z]{2}-[0-9]{5}$" placeholder="ll-ddddd" />
  <button>Enviar</button>
</form>

    Another option (in case it patterndoesn't work) would be to do it with JavaScript, with the same regular expression. When submitting the form, it would be checked with JavaScript if the field meets the format you want and if not, an error message is displayed and it is not sent.

    In JavaScript it would look like this:

    document.getElementById("miform").addEventListener("submit", function(e) {
  var estado = document.getElementById("estado-cp").value;
  if (estado.match("^[a-zA-Z]{2}-[0-9]{5}$")) {
    alert("Cumple el patron");
  } else {
    alert("No cumple el patron");
    e.preventDefault(); // no se envia el formulario
  }
});
    <form id="miform">
  <input type="text" id="estado-cp" />
  <button>Enviar</button>
</form>

    Now, knowing that the number of states is limited (50) and that there are some special cases (territories, foreign code), you could further limit the two letters that are allowed to just the ones that are valid (eg: AL, AK , TX...) and the regular expression could be like this:

    ^[AL|AK|AS|AZ|AR|CA|CO|CT|DE|DC|FL|GA|GU|HI|ID|IL|IN|IA|KS|KY|LA|ME|MD|MH|MA|MI|FM|MN|MS|MO|MT|NE|NV|NH|NJ|NM|NY|NC|ND|MP|OH|OK|OR|PW|PA|PR|RI|SC|SD|TN|TX|UT|VT|VA|VI|WA|WV|WI|WY]{2}-[0-9]{5}$
    • 1