En el móvil, cuando se inserta el número de PIN, y luego alternar mostrar/ocultar, el teclado numérico también cambia a teclado alfanumérico. Lo requería, cuando alterno el botón mostrar/ocultar, solo debería mostrar el teclado numérico
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <section ng-app="myApp" ng-controller="mainCtrl"> <input type="{{inputType}}" placeholder="Put your pin" inputmode="numeric" /> <input type="checkbox" id="checkbox" ng-model="passwordCheckbox" ng-click="hideShow()" /> <label for="checkbox" ng-if="passwordCheckbox">Hide Pin</label> <label for="checkbox" ng-if="!passwordCheckbox">Show Pin</label> </section> <script src="https://code.angularjs.org/1.2.13/angular.min.js"></script> </body> </html>y el archivo js es
var myApp = angular.module('myApp', []); myApp.controller('mainCtrl', ['$scope', function( $scope ){ // Set the default value of inputType $scope.inputType = 'password'; // Hide & show pin function $scope.hideShow = function(){ if ($scope.inputType == 'password') $scope.inputType = 'text'; else $scope.inputType = 'password'; }; }]);y CSS
section { background: #fff; box-shadow: 2px 2px 0 1px rgba(0, 0, 0, .1); margin: 3em auto; padding: 2em; width: 600px; } input { font-size: 1em; padding: 1em; }¿Cómo mostrar solo el teclado numérico mientras se alterna el botón?
Simplemente puede configurar el tipo de entrada de texto para que sea un number en lugar de texto.
// Hide & show pin function $scope.hideShow = function(){ $scope.inputType = $scope.inputType == 'password' ? 'number' : 'password'; };