顯示密碼

by SuHan Lin

HTML

舊的密碼：<input type="password" name="pwd" id="pwd" class="password" pattern="^[A-Za-z0-9]+$" required="required"><br />

新的密碼：<input type="password" name="new_pwd" id="new_pwd" class="password" pattern="^[A-Za-z0-9]+$" required="required"><br />

確認密碼：<input type="password" name="renew_pwd" id="renew_pwd" class="password" pattern="^[A-Za-z0-9]+$" required="required"><br />

<input type="checkbox" id="show_password" value="顯示">

CSS

.password {
  width: 200px;
  height: 24px;
  line-height: 24px;
  bordeR: 1px solid #ccc;
}

JavaScript

$(function(){
    //先取得 #pwd、#new_pwd、#renew_pwdInput 及產生一個文字輸入框
    var $pwd = $('#pwd'),
    $pwdInput = $('<input type="text" name="pwd" class="password" pattern="^[A-Za-z0-9]+$" required="required"/>');
    var $new_pwd = $('#new_pwd'),
    $new_pwdInput = $('<input type="text" name="new_pwd" class="password" pattern="^[A-Za-z0-9]+$" required="required"/>');
    var $renew_pwd = $('#renew_pwd'),
    $renew_pwdInput = $('<input type="text" name="renew_pwd" class="password" pattern="^[A-Za-z0-9]+$" required="required"/>');
    
    // 當勾選顯示密碼框時
    $('#show_password').click(function(){

    // 如果是勾選則...
    if(this.checked){
        // 用 $passwordInput 來取代 $password
        // 並把 $passwordInput 的值設為 $password 的值
        $pwd.replaceWith($pwdInput.val($pwd.val()));
        $new_pwd.replaceWith($new_pwdInput.val($new_pwd.val()));
        $renew_pwd.replaceWith($renew_pwdInput.val($renew_pwd.val()));
    }else{
        // 用 $password 來取代 $passwordInput
        // 並把 $password 的值設為 $passwordInput 的值
        $pwdInput.replaceWith($pwd.val($pwdInput.val()));
        $new_pwdInput.replaceWith($new_pwd.val($new_pwdInput.val()));
        $renew_pwdInput.replaceWith($renew_pwd.val($renew_pwdInput.val()));
    }
  });
});