How to implement onfocus() with span tag onclick() event-CodePudding

I have one input type field which is google inspired input type with label animation which has onfocus event and In one of the Input fields has the Password field in which I have to apply eye-toggle functionality with onclick event. I am sharing a screenshot of the input type.

When I am trying to implement toggle functionality for passwords. onclick event is not able to trigger because of the onfocus event.

Here is the code for the toggle.

CSS and icon.

    .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>

Because of the Animation in the input field toggle click event is not even triggered.

$(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 >
  <input type="password" id="Password" name="Password"  placeholder=" ">
  <label >New Password</label>
  <div >
    <span toggle="#password-field" ></span>
    <br>
  </div>
</div>

I have tried to perform another click event instead of the click event, but still, any of the click events are not working with Animation.

CodePudding user response：

Please update some CSS as per below:

.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;
}

Please let me know if you still have any issues.