분류
javascript
비밀번호를 볼 수 있거나 못보거나..
본문
https://codepen.io/gymbry/pen/fJchw
HTML :
<section ng-app="myApp" ng-controller="mainCtrl">
<input type="{{inputType}}" placeholder="Put your password" />
<input type="checkbox" id="checkbox" ng-model="passwordCheckbox" ng-click="hideShowPassword()" />
<label for="checkbox" ng-if="passwordCheckbox">Hide password</label>
<label for="checkbox" ng-if="!passwordCheckbox">Show password</label>
</section>
<script src="https://code.angularjs.org/1.2.13/angular.min.js"></script>
CSS :
/*
* Thanks to https://subtlepatterns.com/ for the background.
*/
* {
font-family: Verdana, monospace;
}
body {
background: url('https://subtlepatterns.com/patterns/congruent_outline.png') repeat 0 0;
font-family: Verdana, monospace;
}
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;
}
JS :
var myApp = angular.module('myApp', []);
myApp.controller('mainCtrl', ['$scope', function( $scope ){
// Set the default value of inputType
$scope.inputType = 'password';
// Hide & show password function
$scope.hideShowPassword = function(){
if ($scope.inputType == 'password')
$scope.inputType = 'text';
else
$scope.inputType = 'password';
};
}]);
- 이전글Vue.js를 활용한 강력한 패스워드 발생기 18.06.25
- 다음글보안이 강화된 비밀번호를 입력 받으려면? 18.06.25