Is it possible to use masks on mobile devices satisfactorily?

Question

So after a true pilgrimage that yielded about 10 questions, I discovered that the masks I was wearing didn’t work properly on mobile devices.

The main ones are (were?):

• Maskmoney
  
• inputMask

What happens is that on the mobile devices I tested they do not work properly (for date, time, money etc...). I’ve done some research and they don’t really work properly on mobile devices (p.ex.:Not Working on smartphones #126).

I tried to refer to jQueryMobile, but nothing has changed...

So the question is:

Is there any way to use JS/jQuery masks on mobile devices that works satisfactorily on most devices? Or, experience-based, it is better to ask the user to enter the ., , etc.?

Answer 1

Update 11/07/2019

Yes, since the time I wrote the answer several javascript libraries have been created for mask manipulation. I recently used a library called Imask to develop a project of a selection process, you can check the complete implementation with Vue in that repository, but I leave below an explanatory part of the implementation:

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
    }
  }
}

I believe that the mask will help both web and mobile development, if there is any specific need leave a comment below that I will try to increase the response.

---

Original Reply 13/10/2015:

Yes it is possible if you make your own mask plugin with your own needs.

I’ve tried several and I don’t know of any that works 100% in all browsers. You can even try the Jquerymask, it is a plugin very simple to tinker and well documented, but it did not meet 100% of my needs and may not meet your.

An alternative solution that I found without masks is to describe in the placeholder of the element as the user must fill and complement the feedbacks with attributes of the HTML itself as for example the Pattern HTML5, maxlength, required and others, depending on the need.

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>

The advantage of doing it that way is that no need to load any additional plugin, where, the Pattern is responsible for validating regular expressions and give feedback to the user in real time along with the other attributes (you can also use regular expressions with Javascript for greater compatibility). Pattern stand: Can I use.

And finally I validate the data on the server side, because only one will mask in the client side is totally insecure. For this I use the PHP preg_match. Example:

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

This will only accept letter and number characters.

---

We could create an open repository for the community and start working on a plugin that meets everyone’s needs, because I believe it is still missing today...

Answer 2

There is a framework for Angularjs mobile that works with angular. To work with fields type number, decimal, phone is much easier than using jquery. In addition to making it more functional as well. Below an example:

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>