如何用span標簽onclick()事件實作onfocus()

我有一個輸入型別欄位，它是受谷歌啟發的輸入型別，帶有帶有 onfocus 事件的標簽影片，并且在其中一個輸入欄位中有密碼欄位，我必須在其中應用眼睛切換功能和 onclick 事件。我正在分享輸入型別的螢屏截圖。

當我嘗試為密碼實作切換功能時。由于 onfocus 事件，onclick 事件無法觸發。

這是切換的代碼。

CSS 和圖示。

    .form-row {
        display: -ms-flexbox;
        display: -webkit-box;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .col-3 {
         max-width: 485px;
        -webkit-box-flex: 0;
         flex: 0 0 485px;
    }
    
    .inputfield {
        margin-bottom: 24px;
        margin-right: 20px;
        position: relative;
    }
    
    .inputfield .form-label{
        position: absolute;
        top: 23px;
        left: 20px;
        cursor: text;
        transition: top 250ms ease-in-out, left 250ms ease-in-out, font-size 250ms ease-in-out
    }
    
    .inputfield input{
        margin: 8px 0;
    }
 
    .inputfield-control {
        width: 100%;
        height: 50px;
        border: 1.5px solid #C4C4C4;
        border-radius: 5px;
        outline: none;
        background: none;
        padding-left: 16px;
        position: relative;
    }
    
    .inputfield-control:focus {
        border: 1.5px solid #2464E4;
    }
 
    .inputfield-control:focus ~ .form-label {
        top: 0px;
        left: 20px;
        font-size:13px;
        font-weight: 400;
        color: #232323;
        background-color: #ffffff;
        z-index: 10;
        padding-left: 4px;
        padding-right: 4px;
    }
    
    .inputfield-control:not(:placeholder-shown).inputfield-control:not(:focus)~.form-label {
        top: 0px;
        left: 20px;
        font-size:13px;
        font-weight: 400;
        color: #232323;
        background-color: #ffffff;
        z-index: 10;
        padding-left: 4px;
        padding-right: 4px;
    }

    .show-password-icn {
        font-size: 22px !important;
        margin-top: -40px;
        margin-right: 30px;
       color: #767676;
       float: right;
     }
    
    <link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"></script>

由于輸入欄位中的影片切換點擊事件甚至沒有被觸發。

$(document).on('click', '.toggle-password', function() {
  $(this).toggleClass("icon ion-md-eye");
  var input = $("#Password");
  input.attr('type') === 'password' ? input.attr('type', 'text') : input.attr('type', 'password')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-3 inputfield">
  <input type="password" id="Password" name="Password" class="inputfield-control" placeholder=" ">
  <label class="form-label">New Password</label>
  <div class="input-group-append custom">
    <span toggle="#password-field" class="icon ion-md-eye-off field-icon toggle-password show-password-icn"></span>
    <br>
  </div>
</div>

我試圖執行另一個點擊事件而不是點擊事件，但仍然有任何點擊事件不適用于影片。

uj5u.com熱心網友回復：

請按照以下方式更新一些 CSS：

.inputfield-control {
    width: 100%;
    height: 50px;
    border: 1.5px solid #C4C4C4;
    border-radius: 5px;
    outline: none;
    background: none;
    padding-left: 16px;
    position: relative;
    padding-right: 70px;
}

.input-group-append.custom {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
    z-index: 1;
}

.show-password-icn {
    font-size: 22px !important;
    color: #767676;
}

如果您還有任何問題，請告訴我。

標籤：javascript网页格式CSS姜戈

上一篇：我該怎么做才能訪問對方的外鍵？

下一篇：用戶物件沒有屬性組態檔