Question

以下是材料设计密码字段，右侧带有一个按钮。当您单击按钮时，它将切换输入密码的可见性。

我有一个纯HTML + Javascript + Jquery项目。

这是我将Material Design导入到项目中的方式：

<head>
  <script src="assets/js/vendors/jquery-3.2.1.min.js"></script>

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

如何在项目中生成以下材料设计组件？

Answer 1

像这样吗？

$(document).on("click", "fieldset > button.toggle-password", function(){
  $(this).siblings("input").prop("type", (index, type) => type === "password" ? "text" : "password");
});

fieldset {
  border-color: blue;
  border-radius: 5px;
}

fieldset legend {
  color: blue;
}

fieldset input {
  border: none;
  display: inline-block;
  width: calc(100% - 50px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>

<fieldset>
  <legend>Enter your password</legend>
  <input type="password" value="p4ssw0rd"/>
  <button class="toggle-password" type="button">eye</button>
</fieldset>

是的，我知道，这看起来会更好。但您了解了想法/结构。

在HTML，JavaScript项目中向材料设计组件添加可见性切换吗？

1 个答案: