iT邦幫忙

2021 iThome 鐵人賽

DAY 26
0
Modern Web

快搭上姐姐的`微`前端便車系列 第 26

第26車廂-眼睛眨啊眨~登入密碼的顯示/隱藏應用篇

本篇介紹現行登入密碼欄位,旁邊都有一個小眼睛,是如何點一下就秀出密碼的呢?

▼ 完成圖如下

首先先準備我們的小眼睛,

Font Awesome 使用方式

官網:Font Awesome https://fontawesome.com/
https://ithelp.ithome.com.tw/upload/images/20211011/20142016EtPS6EYtKK.png
得到我們要的標籤,放入HTML裡

Font Awesome 引用(CDN方式)

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>

你也可以選擇CSS方式或是JS方式

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script>

差別在於如果是JS版本,圖示會被轉為svg檔;
注意如果你是使用舊版EX:4.7這個icon是不會出現的喔!
原則上icon就會顯示了囉!

那接著在說明完整範例到使用到的吧

範例

引用(CSS)

▼因為範例套版是使用bootstrap5 Demo,所以會引入bootstrap5 CSS

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css"/>

HTML

<main class="form-signin">
  <form>
    <h1 class="h3 mb-3 fw-normal">快搭上姐姐的`微`前端便車</h1>

    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">請輸入信箱</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">請輸入密碼</label>
     <i id="checkEye" class="fas fa-eye"></i>
     
    </div>

    <div class="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me">記住我
      </label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="button">Sign in</button>
  </form>
</main>

CSS

▼ 基本上只要看眼睛就好 #checkEye {.........} 絕對定位讓他定位在密碼input框裡,並垂直置中

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/*眼睛*/
#checkEye {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

邏輯

抓出 眼睛的id 當被按的時候 將密碼Input type改為text,並修改class(為關閉眼睛的)樣式;反之

JS

  var checkEye = document.getElementById("checkEye");
      var floatingPassword =  document.getElementById("floatingPassword");
      checkEye.addEventListener("click", function(e){
        if(e.target.classList.contains('fa-eye')){
        //換class 病患 type
          e.target.classList.remove('fa-eye');
          e.target.classList.add('fa-eye-slash');
          floatingPassword.setAttribute('type','text')
        }else{
          floatingPassword.setAttribute('type','password');
          e.target.classList.remove('fa-eye-slash');
          e.target.classList.add('fa-eye')
        }
      });

JQ

$("#checkEye").click(function () {
  if($(this).hasClass('fa-eye')){
     $("#floatingPassword").attr('type', 'text');
  }else{
     $("#floatingPassword").attr('type', 'password');
  }
  $(this).toggleClass('fa-eye').toggleClass('fa-eye-slash');
}); 

程式碼(JS/JQ)

附上程式碼

Vue

邏輯

  • 使用到三元運算 isActive 為 true 走 type改為password ; 眼睛class 為fa-eye
    設定一個data isActive 為 true,按下眼睛Id 將isActive 改為false

HTML

<main id="app" class="form-signin">
  <form>
    <h1 class="h3 mb-3 fw-normal">{{ h1Title }}</h1>

    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">請輸入信箱</label>
    </div>
    <div class="form-floating">
      <input :type="isActive ? 'password' : 'text'" class="form-control" id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">請輸入密碼</label>
     <i id="checkEye" :class="[isActive ? 'fa-eye' : 'fa-eye-slash' , 'fas']" @click="isActive=!isActive"> </i>   
    </div>

    <div class="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me">記住我
      </label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="button" >Sign in</button>
  </form>
  
</main>

CSS 同上

VUE

const app = Vue.createApp({
  data(){
    return {
      h1Title:"快搭上姐姐的`微`前端便車",
      isActive:true,
    }
  },
});

app.mount("#app")

這樣就完成啦!

程式碼(vue3)

附上程式碼

那今天就先到這啦!
/images/emoticon/emoticon11.gif


上一篇
第25車廂-讓pdf檔有翻頁效果!pdf.js+turn.js應用篇
下一篇
第27車廂-關於訊息視窗:bootstrap5Model應用篇
系列文
快搭上姐姐的`微`前端便車30

尚未有邦友留言

立即登入留言