19

Então depois de uma verdadeira peregrinação que rendeu umas 10 perguntas, descobri que as máscaras que estava usando não funcionam corretamente nos dispositivos mobile.

As principais são (eram?):

O que acontece é que nos dispositivos móveis que testei elas não funcionam corretamente (para data, hora, dinheiro etc...). Já fiz algumas pesquisas e realmente eles não funcionam corretamente em dispositivos mobile (p.ex.:Not working on smartphones #126).

Tentei referenciar a jQueryMobile, mas não mudou nada...

Então a pergunta é:

Existe alguma forma de utilizar máscaras JS/jQuery em dispositivos móveis, que funcione de forma satisfatória na maioria dos dispositivos? Ou, baseado na experiência, é melhor pedir que o usuário entre com os ., , etc?

3
  • 1
    Realmente máscara é complicado, pra conseguir acessar o meutim pelo celular tenho que copiar e colar o número de outro lugar, pois os parenteses não entram conforme vou digitando. 9/10/2015 às 20:12
  • Já experimentou usar este plugin igorescobar.github.io/jQuery-Mask-Plugin? Fiz um teste e funciona normalmente no meu Android rodando o Google Chrome.
    – alvarodms
    13/10/2015 às 12:12
  • 1
    Máscara em tempo de digitação é um inferno, inclusive para o usuário. Eu odeio máscara como desenvolvedor e ainda mais como usuário. Tente, por exemplo, digitar 123756 numa máscara 0#.###,00, obtendo 1.237,56 e selecionar 7 e corrigir para 4. A maioria das máscaras impedem a seleção dos textos e jogam a digitação para o fim do valor. A recomendação corrente é não utilizar máscaras e apenas informar ao usuário qual formato utilizar, como dd/MM/yyyy ou 30/01/1990.
    – MFedatto
    13/10/2015 às 14:21

2 Respostas 2

9
+50

Atualização 11/07/2019

Sim, desde a época em que escrevi a resposta diversas bibliotecas javascript foram criadas para manipulação de mascaras. Recentemente utilizei um biblioteca chamada Imask para desenvolver um projeto de um processo seletivo, você pode conferir a implementação completa com Vue nesse repositório, mas deixo abaixo um trecho explicativo da implementação:

const moneyPattern = {
  mask: '$num',                  // cria um padrão que inclui $ e o bloco num
  blocks: {
    num: {                       // define o bloco num
      mask: Number,              // define o padrão de Number para o bloco num
      thousandsSeparator: ','    // define a separação de milhares com virgula
    }
  }
}

Acredito que a mascará auxilie tanto desenvolvimento web quanto mobile, se houver alguma necessidade específica deixe um comentário abaixo que tentarei incrementar a resposta.


Resposta Original 13/10/2015:

Sim é possível se você fizer o seu próprio plugin de mascara com as suas próprias necessidades.

Já testei vários e desconheço de algum que funcione 100% em todos os browsers. Você pode até tentar o JqueryMask, ele é um plugin muito simples de mexer e bem documentado, porém ele não atendeu 100% das minhas necessidades e talvez não atenda a sua.

Uma solução alternativa que eu achei sem mascarás é descrever no próprio placeholder do elemento como o usuário deve preencher e complementar os feedbacks com atributos do próprio HTML como por exemplo o pattern do HTML5, maxlength, required e outros, dependendo da necessidade.

Ex.:

<label>CNPJ: *
  <input name="cnpj" type="text" placeholder="00.000.000/0000-00" maxlength="18" required pattern="[0-9]{2}.[0-9]{3}.[0-9]{3}\/[0-9]{4}-[0-9]{2}" value="">
</label>

A vantagem de fazer dessa forma é que não preciso carregar nenhum plugin adicional, onde, o pattern é responsável por fazer a validação das expressões regulares e dar feedback para o usuário em tempo real junto com os outros atributos (você pode utilizar também expressões regulares com Javascript para maior compatibilidade). Suporte pattern: Can I use.

E para finalizar faço a validação dos dados no lado servidor, pois só uma mascará no client-side é totalmente inseguro. Para isso utilizo o preg_match do PHP. Exemplo:

if (preg_match("/([a-zA-Z0-9])/", $email)){return true;}

Isso fará com que apenas sejam aceitos caracteres do tipo letra e número.


Poderíamos criar um repositório aberto para a comunidade e começar a trabalhar em um plugin que atenda as necessidades de todos, pois acredito que ainda hoje esteja em falta...

1
  • Eu dei uma olhada no jQueryMask e parece ser o que funciona melhor mesmo, mas ainda assim não to bem certo (testei apenas no windows phone), e mesmo ele tem o defeito clássico em máscaras de dinheiro de empurrar a alteração para o fim. A solução alternativa com placeholder, pattern etc me parece até agora a melhor solução. +1 (só pra constar, esta recompensa vai pra quem tiver mais votos na resposta, no final dos 7 dias)...
    – gustavox
    13/10/2015 às 22:27
2

Existe um framework do angularjs mobile que trabalha com angular. Para trabalhar com campos tipo número, decimal, telefone é muito mais fácil do que utilizar o jquery. Além de deixa-lo mais funcional também. Abaixo um exemplo:

var app = angular.module('MobileAngularUiExamples', [
  'ngRoute',
  'mobile-angular-ui',
  'mobile-angular-ui.gestures',
  'ui.utils.masks'
]);

app.controller('MainController', function($rootScope, $scope){

 
});
#lightbulb {
  font-size: 100px;
  display: block;
  text-align: center;
}

h1 {
  padding: 0;
  margin: 10px 0;
}

.chat-user-avatar {
  font-size: 40px;
  background: #ccc;
  padding: 5px 10px;
}

.feature-icon {
  font-size: 44px;
  padding: 0;
  line-height: 68px;
  width: 72px;
  text-align: center;
  opacity: .8;
  border: 3px solid;
  border-radius: 200px;
  height: 72px;
  margin-bottom: 20px;
}

.feature-icon.fa-gamepad {
  line-height: 60px;
}

.feature-icon.fa-tachometer {
  line-height: 60px;
}

.app-content-loading {
  text-align: center;
  height: 100%;
  width: 100%;
  background: #fff;
  position: relative;
}

.loading-spinner {
  position: absolute;
  font-size: 50px;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

.carousel-example-content {
  position: absolute;
  font-size: 50px;
  line-height: 50px;
  width: 100%;
  text-align: center;
  top: 50%;
  margin-top: -50px;
}


.carousel-item {
  display: block;
  color: #444;
  background: #f4f4f4;
  box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
  opacity: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.carousel {
  padding: 20px;
  overflow: visible;
}

.carousel-inner {
  position: relative;
  overflow: visible;
}

.carousel>.item, .carousel-item {
  top: 0;
  left: 0;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.carousel-item {
  -webkit-transition: -webkit-transform 500ms;
  -moz-transition: -moz-transform 500ms;
  transition: transform 500ms;
}

[drag-to-dismiss]{
  transform: translate(0,0); /* NOTE: this is required to prevent mobile webkit issues */ 
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: opacity 300ms, -webkit-transform 300ms;
  -moz-transition: opacity 300ms, -moz-transform 300ms;
  transition: opacity 300ms, transform 300ms;
  opacity: 1;
}

.notices-container {
  overflow-x: hidden;
}

.dismiss {
  -webkit-transition: opacity 300ms, -webkit-transform 300ms;
  -moz-transition: opacity 300ms, -moz-transform 300ms;
  transition: opacity 300ms, transform 300ms;
  opacity: 0.5;
}

.dismitted {
  -webkit-transition: opacity 300ms, -webkit-transform 300ms;
  -moz-transition: opacity 300ms, -moz-transform 300ms;
  transition: opacity 300ms, transform 300ms;
  opacity: 0;
}

.list-group-item-home {
  padding: 20px; 
}

pre {
  text-align: left !important;
}

input.scrollable-header {
  border-bottom: 3px solid #ccc;
}

.toucharea {width: 100%; height: 100%;}
<link rel="stylesheet" href="http://mobileangularui.com/dist/css/mobile-angular-ui-hover.min.css">
<link rel="stylesheet" href="http://mobileangularui.com/dist/css/mobile-angular-ui-base.min.css">
<link rel="stylesheet" href="http://mobileangularui.com/dist/css/mobile-angular-ui-desktop.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular-route.min.js"></script>
<script src="http://mobileangularui.com/dist/js/mobile-angular-ui.min.js"></script>
<!-- Required to use $touch, $swipe, $drag and $translate services -->
<script src="http://mobileangularui.com/dist/js/mobile-angular-ui.gestures.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.5/angular-locale_pt-br.js"></script>

<script src="http://assisrafael.github.io/angular-input-masks/javascripts/masks.js"></script>


<div ng-app="MobileAngularUiExamples" ng-controller="MainController">
    <div class="form-group has-success has-feedback">
        <label>Email</label>
        <input type="email" ng-model="email" class="form-control ng-pristine ng-valid needsclick ng-valid-email ng-touched" placeholder="Enter email">
    </div>
    <div class="form-group has-success has-feedback">
        <label>Dinheiro</label>
        <input type="text" ng-model="number" ui-number-mask="2" class="form-control ng-pristine ng-valid needsclick ng-valid-number ng-touched" placeholder="Enter number">
    </div>
</div>

4
  • Agradeço a resposta Emir, mas eu realmente não posso deixar a jquery, ou acrescentar mais o angular no projeto. De qualquer forma, como é uma possível solução para a pergunta, dei +1. Valeu.
    – gustavox
    13/10/2015 às 22:29
  • Certo, qual a versao do jquery mobile? 13/10/2015 às 23:09
  • Então, eu tentei usar a última, mas não obtive sucesso...
    – gustavox
    13/10/2015 às 23:57
  • 2
    Também tive uma experiência negativa com o jquery-mobile. Ele facilita bastante coisa, mais é um tanque de guerra. Tentei todar em alguns dispositivos e ficou muito lento. Precisei de S3 pra faze-lo rodar sem muitas travadas, principalmente ao carregar a página 14/10/2015 às 0:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .