분류 javascript

비밀번호를 볼 수 있거나 못보거나..

컨텐츠 정보

  • 조회 553 (작성일 )

본문

https://codepen.io/gymbry/pen/fJchw


8d3be543f3528635424e74286c7ea8f3_1529915899_1304.png

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';
  };
  
}]);