In mobile, when inserted pin number, and then toggle show/hide then numeric key pad also changed to alphanumeric keypad. I required, when I toggle show/hide button it should be only display numeric keypad
<!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>
and js file is
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';
};
}]);
and 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;
}
- when entering pin it shows numeric keypad
- when toggle show numeric keypad change to alphanumeric keypad
how to show only numeric key pad while toggling button?
You could simply set the text input type to be
numberinstead of text.