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;
}
how to show only numeric key pad while toggling button?
You could simply set the text input type to be number instead of text.
// Hide & show pin function
$scope.hideShow = function(){
$scope.inputType = $scope.inputType == 'password' ? 'number' : 'password';
};