Text field mask does not work in the mobile environment

Question

Text field mask does not work in the mobile environment

Navigation

#1 by (2 votes)

3

I used the following code in jQuery to mask the telefone field for example.

jQuery(document).ready(function () {
    $("#telefone").mask("(99)9999.9999");
});

This code works perfectly on the computer, but on the phone, only the formatting appears waiting to be typed something, but when something is typed, the mask is not applied, thus blending the numbers with the other characters.

Example of what happens:

jQuery(function($){
$("#telefone").mask("(99) 9999-9999");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.min.js"></script>

<strong>No desktop: </strong>
<input type="text" id="telefone">
<br><br>
<strong>No celular: </strong>
<input type="text" value="(__)____.____">

Does anyone have any idea how to fix this?

Note: If you enter the correct number of phone numbers, even if you have other characters in the field, it applies the filter by pressing enter, or clicking outside the field.

javascript jquery

asked by anonymous 20.01.2017 / 12:19

1 answer

Doctrine ORM returning array [0] in find Is it possible to do an INSERT and an UPDATE in the same query in java?

score 2 · Accepted Answer

One option is to use a pure javascript mask. Using regex can be something like:

document.getElementById('telefone').addEventListener('input', function (e) {
  var aux = e.target.value.replace(/\D/g, '').match(/(\d{0,2})(\d{0,4})(\d{0,4})/);
  e.target.value = !aux[2] ? aux[1] : '(' + aux[1] + ') ' + aux[2] + (aux[3] ? '-' + aux[3] : '');
});

<input type="text" id="telefone" placeholder="(99) 9999.9999"/>