Is it possible to use masks on mobile devices satisfactorily?

Question

Is it possible to use masks on mobile devices satisfactorily?

Navigation

#1 by (8 votes)
#2 by (2 votes)

17

Then after a true pilgrimage that yielded some 10 questions, I discovered that the masks I was using do not work correctly on mobile devices.

The main ones are (were?):

What happens is that on the mobile devices I tested they do not work correctly (for date, time, money etc ...). I've done some research and they do not work properly on mobile devices (eg Not working on smartphones # 126 ).

I tried referencing jQueryMobile but did not change anything ...

So the question is:

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

javascript jquery mobile

asked by anonymous 09.10.2015 / 21:48

2 answers

2

There is a angularjs mobile framework that works with angular. To work with number, decimal, and phone type fields is much easier than using jquery. Plus it makes it more functional too. Here is 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><!--Requiredtouse$touch,$swipe,$dragand$translateservices--><scriptsrc="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><scriptsrc="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>

13.10.2015 / 14:57

What are HTML entities? Alternatives to the (anti) standard Entity-Attribute-Value

score 8 · Accepted Answer

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

I have tested several and I do not know of any that works 100% in all browsers. You can even try JqueryMask , it's a very simple plug-in and well-documented plugin, but it did not answer 100% of my needs and may not meet your needs.

One workaround that I found unmasked is to describe in the placeholder element of the element how the user should fill in and supplement feedbacks with HTML attributes such as 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 this is that I do not need to load any additional plugins , where pattern is responsible for validating expressions regular 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). Support pattern: Can I use .

And to finish I validate the data on the server side, because only one mask on the client side is totally insecure. For this I use the preg_match of PHP. 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 the needs of everyone, as I believe that even today it is missing ...