jquery 仅使用javascript切换密码/文本

llmtgqce 于 2023-01-20 发布在 jQuery

关注(0)|答案(2)|浏览(126)

我想把下面的代码改为javascript：

$(document).ready(function() {
    $('.fa-eye, .fa-eye-slash').click(function() {
        $(this).toggleClass('fa-eye fa-eye-slash');

        var input=$(this).parent().find('input');

        if(input.attr('type')=='password') {
            input.attr('type', 'text');
        }else input.attr('type', 'password');
    });
});

它的作用是当你点击一个"眼睛图标"时，它会将该图标更改为"眼睛斜线图标"，并将同一div中的密码字段更改为文本，所以基本上是切换密码/文本。
由于这是我目前唯一使用的javascript，我认为只为此包含jQuery或ZeptoJS是多余的，这可能需要几行javascript就可以完成。
请注意：这需要应用到多个字段，这就是为什么我选择不使用ID。

jquery

来源：https://stackoverflow.com/questions/75170640/toggle-password-text-with-javascript-only

2条答案

按热度按时间

eoxn13cs1#

以下是为使其不使用jQuery而仅依赖普通JS和Web API（https://developer.mozilla.org/en-US/）而进行的更正：

.addEventListener()将冒泡事件处理程序添加到元素
DOMContentLoaded事件而不是$(document).ready()
.querySelectorAll()和.querySelector()来选择元素，而不是使用$函数
.classList.toggle()而不是.toggleClass()
event.target而不是$(this)
.getAttribute()和.setAttribute()，而不是attr()
.forEach()以迭代返回元素的数组

document.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.fa-eye, .fa-eye-slash')    
    .forEach( el => {
      el.addEventListener('click', event =>{        
        const trigger = event.target;        
        trigger.classList.toggle('fa-eye');
        trigger.classList.toggle('fa-eye-slash');
        
        const input = trigger.parentNode.querySelector('input');         
        if (input.getAttribute('type') == 'password')
          input.setAttribute('type', 'text');
        else
          input.setAttribute('type', 'password');    
      });
    });
});

i{
  cursor: pointer;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div>
  <input type="password">
  <i class="fa-solid fa-eye"></i>
</div>

<hr>

<div>
  <input type="password">
  <i class="fa-solid fa-eye"></i>
</div>

赞(0）回复(0）举报 2023-01-20

kb5ga3dv2#

你可以用普通的JS方法来做，看这个代码片段：

function load() {
    for (let fa of document.querySelectorAll('.fa-eye, .fa-eye-slash')) {
        fa.addEventListener('click', function(e) {
            e.target.classList.toggle('fa-eye');
            e.target.classList.toggle('fa-eye-slash');

            let input = e.target.parentNode.querySelectorAll('input');

            for (let item of input) {
                if (item.type === 'password') item.type = 'text';
                else item.type = 'password';
            }
        });
    }
}

window.addEventListener('load', load);

<div>
    <input type="password" value="foo">
    <input type="test" value="bar">
    <div class='fa-eye' style="background-color: green;">CLICK ME</div>
</div>

注意，jQuery也是Javascript，尽管Javascript不一定是jQuery。

赞(0）回复(0）举报 2023-01-20

我来回答

jquery 仅使用javascript切换密码/文本

2条答案

相关问题

热门标签

最新问答