时间戳

首页 > 解决方案 > 如何阻止密码字段显示“null”作为占位符？

javascript - 如何阻止密码字段显示“null”作为占位符？

问题描述

我有一个交互式密码字段，并且在幕后运行了一些 js。但是，当我单击该字段时，我遇到了这个问题，它根据图像将“null”显示为一个值。

在此处输入图像描述

这仅在我单击该字段时显示，并且我也没有为输入提供占位符。我如何防止它显示？

编码

//floating input controller

const FloatLabel = (() => {

  // add active class
  const handleFocus = (e) => {
    const target = e.target;
    target.parentNode.classList.add('active');
    target.setAttribute('placeholder', target.getAttribute('data-placeholder'));
  };

  // remove active class
  const handleBlur = (e) => {
    const target = e.target;
    if (!target.value) {
      target.parentNode.classList.remove('active');
    }
    target.removeAttribute('placeholder');
  };

  // register events
  const bindEvents = (element) => {
    const floatField = element.querySelector('input');
    floatField.addEventListener('focus', handleFocus);
    floatField.addEventListener('blur', handleBlur);
  };

  // get DOM elements
  const init = () => {
    const floatContainers = document.querySelectorAll('.float-container');

    floatContainers.forEach((element) => {

      if (element.querySelector('input').value) {
        element.classList.add('active');
      }

      bindEvents(element);
    });
  };

  return {
    init: init
  };
})();

FloatLabel.init();
.float-container {
  position: relative;
  background-color: #dfecff;
  width: 100%;
  border-radius: 5px;
  transition: 150ms;
  padding-top: .6em;
  padding-bottom: .6em;
  border: 2px solid #b9d6ff;
}

.float-container:hover {
  background-color: #1a73e8;
  cursor: text;
}

.password-toggle-button {
  position: absolute;
  font-size: 1em;
  padding-top: 8px;
  color: #333333;
  margin-left: 93%;
}

.password-toggle-button:hover {
  cursor: pointer;
  color: #eeeeee;
}

label {
  font-size: 1em;
  font-family: Arial, Helvetica, sans-serif;
  color: #5e5e5e;
  position: absolute;
  margin-left: 3%;
  z-index: 140;
  transform: translate(0, 0) scale(1);
  pointer-events: none;
  user-select: none;
  transform-origin: top left;
  transition: all .1s ease-in-out;
}

.float-container input {
  color: #eeeeee;
}

.float-container.active label {
  transform: translate(-0.5em, -1.5em) scale(.95);
  font-style: italic;
  font-weight: 200;
  border-radius: 10px;
  background-color: #1a73e8;
  padding-left: .5em;
  padding-right: .5em;
  color: #eeeeee;
}

.float-container.active input {
  color: #eeeeee;
}

.float-container.active {
  background-color: #1a73e8;
  border: 2px solid #eeeeee;
}

.form-center {
  display: relative;
  margin-top: 3em;
  margin-left: 5vw;
  margin-bottom: 5em;
  word-break: break-all;
  padding-top: 3%;
  padding-left: 5vw;
  padding-right: 3vw;
  padding-bottom: 5%;
  width: 60vw;
  line-height: 2em;
  background-color: #1a73e8;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  border-color: #333333;
}

input{
  border: none;
  background-color: transparent;
  color: #333333;
  outline: 0;
  margin-top: auto;
  margin-left: 3%;
  margin-right: 20%;
  width: 90%;
  z-index: 150;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" />

<div class="form-center"><div id="float-container" class="float-container" onclick="document.getElementById('pw').focus(); return false;">
  <label for="pw" class="inner-label">Password</label>
  <i class="fa fa-eye password-toggle-button" aria-hidden="true"></i>
  <input type="password" class="floatField id="pw" placeholder="">
</div>
</div>

标签： javascripthtmlcss

解决方案

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet" />

<div class="form-center"><div id="float-container" class="float-container" onclick="document.getElementById('pw').focus(); return false;">
  <label for="pw" class="inner-label">Password</label>
  <i class="fa fa-eye password-toggle-button" aria-hidden="true"></i>
  <input type="password" class="floatField id="pw">
</div>
</div>

您是否尝试过删除占位符？

推荐阅读