Question

我在jsp中使用引导程序生成的CSS类。我正在尝试实现一个带有眼睛图标的密码文本框，一旦用户单击它，它就会变成斜线图标。和密码输入类型将更改为文本类型。

Js功能

  (function () {
    'use strict';
    $('.show-hide-password i').on('click', function() {
        let that = this;
        let input = $(that).closest('.show-hide-password').find('input');

        if ($(input).attr('type') === "password") {
            $(that).removeClass('fa-eye').addClass('fa-eye-slash'); // toggle our classes for the eye icon
            $(input).attr('type','text')
        } else {
            $(this).removeClass('fa-eye-slash').addClass('fa-eye'); // toggle our classes for the eye icon
            $(input).attr('type','password')
        }
    });
})();

jsp

<div class="form-group">
<label>Password</label> 
<span class="text-primary">*</span>
 <div class="input-group-alert mb-3">
    <div class="input-group show-hide-password">
        <form:password id="password" path="password"                                                 
         class="form-control" placeholder="Password" required="" />
            <div class="input-group-append">
                <span class="input-group-text"> 
                  <i class="fa fa-eye" aria-hidden="true"></i> 
                </span>
            </div>
    </div>
    <div class="btn btn-more-info"></div>
    <div id="password_errdiv" style="margin-top: 5px;">
        <span id="password_err" name="password_err"> </span>
    </div>
</div>
</div>

我不确定在jsp中我做错了什么。它既不会变为眼睫毛图标，也不会变为文本类型。

我无法更改js函数。我只能在jsp中进行更改。

我已经在

头中包含了js文件

<script src="https://***.js" type="text/javascript" ></script>

有人可以帮我吗？

引导密码眼图标无法正常工作

0 个答案: