Home / Questions / 263632
Accepted
LauraZ
Asked: 2020-05-15 17:27:28 +0800 CST 2020-05-15 17:27:28 +0800 CST

使用 Material Web Components 显示输入密码的图标

  • 772

我怎样才能做到这一点，当我点击眼睛图标时，它会显示输入中的密码？

<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>

  <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
    <i class="material-icons mdc-text-field__icon">visibility_off</i>
    <input type="password" class="mdc-text-field__input">
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label class="mdc-floating-label">Ingresa tu contraseña</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js">
  </script>
   <script>mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));</script>
</body>

我知道使用切换类我可以更改图标的类，问题是在材料中图标的类是相同的，只有“纯文本”发生了变化

<i class="material-icons mdc-text-field__icon">visibility_off</i>

<i class="material-icons mdc-text-field__icon">visibility</i>

我不想使用 jQuery 来更改type="password"to type="text"，因为我在网上找到的大部分帮助都是关于 jQ 而不是 JS

再次非常感谢你：3

javascript

3 Answers

  1. Best Answer

    使用这个 JS 函数你可以做到，但我看到你不能<i>只点击input. 不知道是html的结构还是使用的类有问题，如果你尝试更改iconMostrar事件一，inputPassword点击输入就会看到它起作用了

    编辑：我在输入和图标中添加了一个 ID，以通过 ID 捕获元素。

    document.getElementById("spanMostrar").addEventListener("click", function(){
    var elementInput=document.getElementById("inputPassword");
    var elementIcon=document.getElementById("iconMostrar");
    if(elementIcon.classList.contains("active")){
        elementIcon.classList.remove("active");
        elementIcon.innerHTML = "visibility";
        elementInput.type="password";
    } else{
        elementIcon.classList.add("active");
        elementIcon.innerHTML  = "visibility_off";
        elementInput.type="text";
    }
});


    document.getElementById("spanMostrar").addEventListener("click", function(){
    var elementInput=document.getElementById("inputPassword");
    var elementIcon=document.getElementById("iconMostrar");
    if(elementIcon.classList.contains("active")){
        elementIcon.classList.remove("active");
        elementIcon.innerHTML = "visibility";
        elementInput.type="password";
    } else{
        elementIcon.classList.add("active");
        elementIcon.innerHTML  = "visibility_off";
        elementInput.type="text";
    }
});
    #container input {
  padding-right: 32px;
}

#spanMostrar {
  bottom: 16px;
  cursor: pointer;
  height: 25px;
  position: absolute;
  right: 10px;
  width: 25px;
  z-index: 10;
}

.form-clear .material-icons {
  font-size: 24px;
  position:absolute;
  top:0px;
  right:0px!important;
}
    <head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>

<body>

  <div id="container" class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
    <input id="inputPassword" type="password" class="mdc-text-field__input">
    <span id="spanMostrar" class="form-clear d-none"><i id="iconMostrar" class="material-icons mdc-text-field__icon">visibility</i></span>
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label class="mdc-floating-label">Ingresa tu contraseña</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js">
  </script>
   <script>mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));</script>
</body>

    • 5

  2. 您也可以使用按钮而不是 i 来执行此操作，并使用 font awesome 安装图标，如下所示。

    <head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

</head>

<body>

  <div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
    <button class="fas fa-eye-slash" type="button" id="verLaClave">
    </button>
    <input type="password" class="mdc-text-field__input" id="clave">
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label class="mdc-floating-label">Ingresa tu contraseña</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
   <script>mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));</script>

<script>
        var elCampoDeClave = document.getElementById('clave');
        var laClave = document.getElementById('verLaClave');

        laClave.addEventListener('click', togglePass);

        function togglePass() {
            laClave.classList.toggle('active');
            (elCampoDeClave.type == 'password') ? elCampoDeClave.type = 'text' :
                elCampoDeClave.type = 'password';
        }

    </script>

</body>

    • 1

  3. 我要做的是用您在文本字段中拥有的角色 =“按钮”替换图标并将其替换为图标切换，这将允许您自动将可见性图标更改为visibility_off并且还包括连锁反应。

    2018 年 12 月，请愿书被打开，以便他们可以在 textfield API 中默认包含这些功能。Kevin Franqueiro（MDC for web 的作者之一）关闭了几个讨论它的线程，这只是为了让您记住官方解决方案尚不可用，但很快就会出现。

    通过向文本字段添加图标切换，您正在创建带有边距的偏移量；要在正式版中修复它，只需将 textfield 和 icon toggle 作为一个 common div 的子项，然后通过使元素居中使 icon toggle 向右浮动，这样你就会在视觉上得到一个很好的结果。

    没有 JS 就不可能改变类型属性，实际上 MDC 组件在你没有意识到的情况下完成了这项工作，但它们确实存在，它不仅仅是 CSS 的东西，那些控制器代码只不过是删除、添加或修改类和HTML 元素参数。

    然后你可以做的是添加一个 .listen() 到带有相应事件和内部的切换图标，输入切换图标对象的 .root_ ，你可以更改这些属性。

    • 1