정보실

웹학교

정보실

javascript 보안이 강화된 비밀번호를 입력 받으려면?

본문

https://codepen.io/allusis/pen/HcriG


//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

https://fonts.googleapis.com/css?family=Roboto:400,100


HTML :

<div id="container">
    <div class="top"></div>
    <div class="middle">
      <div class="left"></div>
      <div class="middle">
        <div id="form-container">

          <div id="all-done">All done</div>

          <form id="verify-new-password">
            <label for="verify-password">Verify your password</label>
            <input placeholder="Enter your password again" type="password" id="verify-password" name="password-to-verify">
            <ul>
              <li id="matches-password">Matches new password.</li>
            </ul>

            <input type="submit" id="verify-password-submit" value="Confirm password" disabled="disabled">
            <button id="go-back">Go back</button>
          </form>

          <form id="new-password" class="visible">
            <label for="password">Choose a new password</label>
            <input placeholder="Enter your password" type="password" id="password" name="password">
            <input type="submit" id="password-submit" value="Next">
            <br class="clear" />
            <ul>
              <li id="eight-plus" class="complete">At least 8 characters long.</li>
              <li id="uppercase" class="complete">Contains uppercase letters.</li>
              <li id="lowercase" class="complete">Contains lowercase letters.</li>
              <li id="numbers" class="complete">Contains numbers.</li>
              <li id="punctuation" class="complete">Contains punctuation.</li>
            </ul>

            
          </form>

        </div>
      </div>
      <div class="right"></div>
    </div>
    <div class="bottom"></div>
  </div>


CSS :

.clear {
  clear: both;
}

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  background: #0083ad;
  height: 100%;
  overflow: hidden;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-smooth: always;
}

#password {
  font-size: 1.4rem;
  font-weight: 100;
}

#all-done {
  pointer-events: none;
  text-indent: -10000px;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: -moz-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: -ms-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: -o-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
  transform: translateX(20px);
}
#all-done:after {
  content: 'All done!';
  font-weight: 100;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 55%;
  text-indent: 0;
}

#all-done:after {
  content: 'All done!';
  font-weight: 100;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 55%;
  text-indent: 0;
}

#all-done.visible {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

#container {
  width: 100%;
  height: 100%;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}

.middle {
  width: 100%;
  height: 100%;
}

#form-container {
  width: 100%;
  height: 100%;
  position: relative;
}

form {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transition: -webkit-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: -moz-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: -ms-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: -o-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 400ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
  transform: translateX(20px);
}

form.visible {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

form.done {
  pointer-events: none;
  opacity: 0;
  -webkit-transform: translateX(-20px);
  -moz-transform: translateX(-20px);
  -ms-transform: translateX(-20px);
  -o-transform: translateX(-20px);
  transform: translateX(-20px);
}

label {
  display: block;
  font-weight: 100;
  font-size: 3rem;
  color: #fff;
  text-shadow: 0px 1px 1px #00A9E0;
  position: relative;
}

label:after {
  content: '';
  border-bottom: 0;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: -2px;
  left: 0;
}

input[type="password"] {
  height: 38px;
  line-height: 38px;
  border-radius: 0;
  border: 1px solid #CACACA;
  background: #FFFFFF;
  font-family: Helvetica;
  font-size: 18px;
  color: #000;
  width: 70%;
  float: left;
  padding: 0 3% 0 3%;
  margin: 6.5% 0 0 0;
}

input[type="submit"] {
  display: block;
  float: left;
  margin: 6.5% 0 0 3%;
  background-image: linear-gradient(-179deg, #98C73D 0%, #98C73D 100%);
  border: 3px solid #98C73D;
  box-shadow: 0 0 0 3px #D0DD2B;
  padding: 0 15px;
  height: 38px;
  font-size: 16px;
  color: white;
  text-transform: uppercase;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
  font-weight: 400;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-transition: background-image 1200ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: background-image 1200ms cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: background-image 1200ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: background-image 1200ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: background-image 1200ms cubic-bezier(0.19, 1, 0.22, 1);
}

input[type="submit"][disabled] {
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
  text-shadow: none;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  background-image: none;
  background: transparent;
}

input[type=password] {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
}

input[type=password]:focus {
  box-shadow: 0 0 0 3px #D0DD2B;
  border: 1px solid transparent;
}

ul {
  padding: 0;
  margin: 3em 0 0 0;
  list-style: none;
}

li {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.7rem;
  height: 20px;
  line-height: 20px;
  margin: 0 0 0.8em 0;
  padding: 0 0 0 40px;
  /*background: url(tick-grey.svg) 10px 1px no-repeat;*/
  position: relative;
  -webkit-transition: color 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -moz-transition: color 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -ms-transition: color 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition: color 800ms cubic-bezier(0.19, 1, 0.22, 1);
  transition: color 800ms cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-backface-visibility: visible;
}

li:before {
  opacity: 1;
  text-shadow: none;
  content: "\e013";
  position: absolute;
  left: -25px;
  width: 20px;
  height: 20px;
  /*background: url(tick-green.svg) 0 1px no-repeat;*/
  position: relative;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  color: #006f94;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition: -webkit-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out;
  -moz-transition: -moz-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out;
  -ms-transition: -ms-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out;
  -o-transition: -o-transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out;
  transition: transform 1200ms cubic-bezier(0.19, 1, 0.22, 1), opacity 100ms ease-out;
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  transform: scale(1.3);
  -webkit-backface-visibility: hidden;
}

li.complete {
  color: white;
}

li.complete:before {
  opacity: 1;
  color: #D0DD2B;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(1.6);
  -moz-transform: scale(1.6);
  -ms-transform: scale(1.6);
  -o-transform: scale(1.6);
  transform: scale(1.6);
}

#go-back {
  border: none;
  background: none;
  font-size: 13px;
  color: #808080;
  line-height: 13px;
  text-shadow: 0px 1px 1px #FFFFFF;
  float: right;
  padding: 0 0 3px 0;
  margin: 40px 5% 0 0;
  border-bottom: 1px solid #808080;
  cursor: pointer;
}

@media (min-width: 360px) {
  form {
    border-radius: 4px;
  }

  label {
    border-radius: 4px 4px 0 0;
  }

  #container {
    width: 100%;
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
  }

  .top, .left, .right, .bottom {
    flex: 1 1 auto;
  }

  .middle {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    -o-flex-direction: row;
    flex-direction: row;
    flex: 0 0 auto;
    width: auto;
    height: auto;
  }

  #form-container {
    width: 330px;
    height: 385px;
    position: relative;
  }

  form {
    position: absolute;
    left: 0;
    top: 0;
  }

  form#verify-new-password {
    height: 72%;
    top: 14%;
  }
}
@-webkit-keyframes back {
  0% {
    -webkit-transform: scale(1) rotateY(180deg);
  }
  10% {
    -webkit-transform: scale(1.000768) rotateY(180deg);
  }
  20% {
    -webkit-transform: scale(1.024576) rotateY(180deg);
  }
  30% {
    -webkit-transform: scale(1.125424) rotateY(180.1713571726deg);
  }
  40% {
    -webkit-transform: scale(1.149232) rotateY(185.4834295234deg);
  }
  50% {
    -webkit-transform: scale(1.15) rotateY(221.6397929434deg);
  }
  60% {
    -webkit-transform: scale(1.149232) rotateY(318.3602070566deg);
  }
  70% {
    -webkit-transform: scale(1.125424) rotateY(354.5165704766deg);
  }
  80% {
    -webkit-transform: scale(1.024576) rotateY(359.8286428274deg);
  }
  90% {
    -webkit-transform: scale(1.000768) rotateY(360deg);
  }
  100% {
    -webkit-transform: scale(1) rotateY(360deg);
  }
}
@-moz-keyframes back {
  0% {
    -moz-transform: scale(1) rotateY(180deg);
  }
  10% {
    -moz-transform: scale(1.000768) rotateY(180deg);
  }
  20% {
    -moz-transform: scale(1.024576) rotateY(180deg);
  }
  30% {
    -moz-transform: scale(1.125424) rotateY(180.1713571726deg);
  }
  40% {
    -moz-transform: scale(1.149232) rotateY(185.4834295234deg);
  }
  50% {
    -moz-transform: scale(1.15) rotateY(221.6397929434deg);
  }
  60% {
    -moz-transform: scale(1.149232) rotateY(318.3602070566deg);
  }
  70% {
    -moz-transform: scale(1.125424) rotateY(354.5165704766deg);
  }
  80% {
    -moz-transform: scale(1.024576) rotateY(359.8286428274deg);
  }
  90% {
    -moz-transform: scale(1.000768) rotateY(360deg);
  }
  100% {
    -moz-transform: scale(1) rotateY(360deg);
  }
}
@-ms-keyframes back {
  0% {
    -ms-transform: scale(1) rotateY(180deg);
  }
  10% {
    -ms-transform: scale(1.000768) rotateY(180deg);
  }
  20% {
    -ms-transform: scale(1.024576) rotateY(180deg);
  }
  30% {
    -ms-transform: scale(1.125424) rotateY(180.1713571726deg);
  }
  40% {
    -ms-transform: scale(1.149232) rotateY(185.4834295234deg);
  }
  50% {
    -ms-transform: scale(1.15) rotateY(221.6397929434deg);
  }
  60% {
    -ms-transform: scale(1.149232) rotateY(318.3602070566deg);
  }
  70% {
    -ms-transform: scale(1.125424) rotateY(354.5165704766deg);
  }
  80% {
    -ms-transform: scale(1.024576) rotateY(359.8286428274deg);
  }
  90% {
    -ms-transform: scale(1.000768) rotateY(360deg);
  }
  100% {
    -ms-transform: scale(1) rotateY(360deg);
  }
}
@-o-keyframes back {
  0% {
    -o-transform: scale(1) rotateY(180deg);
  }
  10% {
    -o-transform: scale(1.000768) rotateY(180deg);
  }
  20% {
    -o-transform: scale(1.024576) rotateY(180deg);
  }
  30% {
    -o-transform: scale(1.125424) rotateY(180.1713571726deg);
  }
  40% {
    -o-transform: scale(1.149232) rotateY(185.4834295234deg);
  }
  50% {
    -o-transform: scale(1.15) rotateY(221.6397929434deg);
  }
  60% {
    -o-transform: scale(1.149232) rotateY(318.3602070566deg);
  }
  70% {
    -o-transform: scale(1.125424) rotateY(354.5165704766deg);
  }
  80% {
    -o-transform: scale(1.024576) rotateY(359.8286428274deg);
  }
  90% {
    -o-transform: scale(1.000768) rotateY(360deg);
  }
  100% {
    -o-transform: scale(1) rotateY(360deg);
  }
}
@keyframes back {
  0% {
    transform: scale(1) rotateY(180deg);
  }
  10% {
    transform: scale(1.000768) rotateY(180deg);
  }
  20% {
    transform: scale(1.024576) rotateY(180deg);
  }
  30% {
    transform: scale(1.125424) rotateY(180.1713571726deg);
  }
  40% {
    transform: scale(1.149232) rotateY(185.4834295234deg);
  }
  50% {
    transform: scale(1.15) rotateY(221.6397929434deg);
  }
  60% {
    transform: scale(1.149232) rotateY(318.3602070566deg);
  }
  70% {
    transform: scale(1.125424) rotateY(354.5165704766deg);
  }
  80% {
    transform: scale(1.024576) rotateY(359.8286428274deg);
  }
  90% {
    transform: scale(1.000768) rotateY(360deg);
  }
  100% {
    transform: scale(1) rotateY(360deg);
  }
}
@-webkit-keyframes front {
  0% {
    -webkit-transform: scale(1) rotateY(0deg);
  }
  10% {
    -webkit-transform: scale(1.000768) rotateY(0deg);
  }
  20% {
    -webkit-transform: scale(1.024576) rotateY(0deg);
  }
  30% {
    -webkit-transform: scale(1.125424) rotateY(0.1713571726deg);
  }
  40% {
    -webkit-transform: scale(1.149232) rotateY(5.4834295234deg);
  }
  50% {
    -webkit-transform: scale(1.15) rotateY(41.6397929434deg);
  }
  60% {
    -webkit-transform: scale(1.149232) rotateY(138.3602070566deg);
  }
  70% {
    -webkit-transform: scale(1.125424) rotateY(174.5165704766deg);
  }
  80% {
    -webkit-transform: scale(1.024576) rotateY(179.8286428274deg);
  }
  90% {
    -webkit-transform: scale(1.000768) rotateY(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateY(180deg);
  }
}
@-moz-keyframes front {
  0% {
    -moz-transform: scale(1) rotateY(0deg);
  }
  10% {
    -moz-transform: scale(1.000768) rotateY(0deg);
  }
  20% {
    -moz-transform: scale(1.024576) rotateY(0deg);
  }
  30% {
    -moz-transform: scale(1.125424) rotateY(0.1713571726deg);
  }
  40% {
    -moz-transform: scale(1.149232) rotateY(5.4834295234deg);
  }
  50% {
    -moz-transform: scale(1.15) rotateY(41.6397929434deg);
  }
  60% {
    -moz-transform: scale(1.149232) rotateY(138.3602070566deg);
  }
  70% {
    -moz-transform: scale(1.125424) rotateY(174.5165704766deg);
  }
  80% {
    -moz-transform: scale(1.024576) rotateY(179.8286428274deg);
  }
  90% {
    -moz-transform: scale(1.000768) rotateY(180deg);
  }
  100% {
    -moz-transform: scale(1) rotateY(180deg);
  }
}
@-ms-keyframes front {
  0% {
    -ms-transform: scale(1) rotateY(0deg);
  }
  10% {
    -ms-transform: scale(1.000768) rotateY(0deg);
  }
  20% {
    -ms-transform: scale(1.024576) rotateY(0deg);
  }
  30% {
    -ms-transform: scale(1.125424) rotateY(0.1713571726deg);
  }
  40% {
    -ms-transform: scale(1.149232) rotateY(5.4834295234deg);
  }
  50% {
    -ms-transform: scale(1.15) rotateY(41.6397929434deg);
  }
  60% {
    -ms-transform: scale(1.149232) rotateY(138.3602070566deg);
  }
  70% {
    -ms-transform: scale(1.125424) rotateY(174.5165704766deg);
  }
  80% {
    -ms-transform: scale(1.024576) rotateY(179.8286428274deg);
  }
  90% {
    -ms-transform: scale(1.000768) rotateY(180deg);
  }
  100% {
    -ms-transform: scale(1) rotateY(180deg);
  }
}
@-o-keyframes front {
  0% {
    -o-transform: scale(1) rotateY(0deg);
  }
  10% {
    -o-transform: scale(1.000768) rotateY(0deg);
  }
  20% {
    -o-transform: scale(1.024576) rotateY(0deg);
  }
  30% {
    -o-transform: scale(1.125424) rotateY(0.1713571726deg);
  }
  40% {
    -o-transform: scale(1.149232) rotateY(5.4834295234deg);
  }
  50% {
    -o-transform: scale(1.15) rotateY(41.6397929434deg);
  }
  60% {
    -o-transform: scale(1.149232) rotateY(138.3602070566deg);
  }
  70% {
    -o-transform: scale(1.125424) rotateY(174.5165704766deg);
  }
  80% {
    -o-transform: scale(1.024576) rotateY(179.8286428274deg);
  }
  90% {
    -o-transform: scale(1.000768) rotateY(180deg);
  }
  100% {
    -o-transform: scale(1) rotateY(180deg);
  }
}
@keyframes front {
  0% {
    transform: scale(1) rotateY(0deg);
  }
  10% {
    transform: scale(1.000768) rotateY(0deg);
  }
  20% {
    transform: scale(1.024576) rotateY(0deg);
  }
  30% {
    transform: scale(1.125424) rotateY(0.1713571726deg);
  }
  40% {
    transform: scale(1.149232) rotateY(5.4834295234deg);
  }
  50% {
    transform: scale(1.15) rotateY(41.6397929434deg);
  }
  60% {
    transform: scale(1.149232) rotateY(138.3602070566deg);
  }
  70% {
    transform: scale(1.125424) rotateY(174.5165704766deg);
  }
  80% {
    transform: scale(1.024576) rotateY(179.8286428274deg);
  }
  90% {
    transform: scale(1.000768) rotateY(180deg);
  }
  100% {
    transform: scale(1) rotateY(180deg);
  }
}


JS :

// Demo from http://www.aerotwist.com/blog/better-password-form-fields/


(function() {
  var container = document.getElementById('container');

  var eightPlus = document.getElementById('eight-plus');
  var uppercase = document.getElementById('uppercase');
  var lowercase = document.getElementById('lowercase');
  var numbers = document.getElementById('numbers');
  var punctuation = document.getElementById('punctuation');
  var matchesPassword = document.getElementById('matches-password');

  var passwordSubmitBtn = document.getElementById('password-submit');
  var passwordInput = document.getElementById('password');
  var passwordForm = document.getElementById('new-password');

  var verifyPasswordSubmitBtn = document.getElementById('verify-password-submit');
  var verifyPasswordInput = document.getElementById('verify-password');
  var verifyPasswordForm = document.getElementById('verify-new-password');
  var goBack = document.getElementById('go-back');

  var allDone = document.getElementById('all-done');

  var containsUppercase = /[A-Z]/;
  var containsLowercase = /[a-z]/;
  var containsNumbers = /[0-9]/;
  var containsPunctuation = /[^\w\s]|_/;

  function setForm() {
    eightPlus.classList.remove('complete');
    uppercase.classList.remove('complete');
    lowercase.classList.remove('complete');
    numbers.classList.remove('complete');
    punctuation.classList.remove('complete');
    passwordSubmitBtn.disabled = true;
  }

  passwordInput.addEventListener('input', function() {

    var value = passwordInput.value;

    // More than 8 characters
    if (value.length >= 8)
      eightPlus.classList.add('complete');
    else
      eightPlus.classList.remove('complete');

    // Contains uppercase
    if (containsUppercase.test(value))
      uppercase.classList.add('complete');
    else
      uppercase.classList.remove('complete');

    // Contains lowercase
    if (containsLowercase.test(value))
      lowercase.classList.add('complete');
    else
      lowercase.classList.remove('complete');

    // Contains numbers
    if (containsNumbers.test(value))
      numbers.classList.add('complete');
    else
      numbers.classList.remove('complete');

    // Contains punctuation
    if (containsPunctuation.test(value))
      punctuation.classList.add('complete');
    else
      punctuation.classList.remove('complete');

    var passwordIsValid = (value.length >= 8) &&
        containsUppercase.test(value) &&
        containsLowercase.test(value) &&
        containsNumbers.test(value) &&
        containsPunctuation.test(value);

    passwordSubmitBtn.disabled = !passwordIsValid;

  });

  verifyPasswordInput.addEventListener('input', function() {
    var passwordsDoMatch = verifyPasswordInput.value === passwordInput.value;

    if (passwordsDoMatch)
      matchesPassword.classList.add('complete');
    else
      matchesPassword.classList.remove('complete');

    verifyPasswordSubmitBtn.disabled = !passwordsDoMatch;
  });

  passwordForm.addEventListener('submit', function(evt) {
    passwordForm.classList.add('done');
    setTimeout(function() {
      verifyPasswordForm.reset();
      verifyPasswordForm.classList.add('visible');
      verifyPasswordInput.focus();
      matchesPassword.classList.remove('complete');
    }, 400);
    evt.preventDefault();
  });

  verifyPasswordForm.addEventListener('submit', function(evt) {
    verifyPasswordForm.classList.add('done');
    setTimeout(function() {
      allDone.classList.add('visible');
    }, 400);
    evt.preventDefault();
  });

  goBack.addEventListener('click', function(evt) {
    verifyPasswordForm.classList.remove('visible');
    setTimeout(function() {
      passwordForm.classList.remove('done');
      passwordInput.focus();
    }, 400);
    evt.preventDefault();
  });

  window.addEventListener('load', function() {
    passwordForm.classList.add('visible');
    setForm();
  });
})();


  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 33회 ]  작성일18-06-25 17:33

웹학교