Question

我希望当用户在特定的输入文本中插入信息时，另一个元素变为可见。我的问题看起来像是在研究，但是我是JavaScript世界的新手，并且我曾尝试在Google和此处进行搜索，但找不到任何东西。

查看我的代码：

.hide {
  display: none;
}

<div>
  <label>Password:</label>
  <input type="password" id="pwInput">
  <a href="#" class="hide">Show password</a>
</div>

我想要的是“显示密码”锚仅在密码输入中包含内容时才显示。

Answer 1

超级简单的选项...使用<input>上的 input 事件处理程序可以在其上切换类。然后，您可以在CSS中使用相邻的兄弟选择器来显示或隐藏<a>。

.hide {
  display: none;
}
.has-input + .hide {
  display: inline;
}

<div>
  <label>Password:</label>
  <input type="password" id="pwInput" 
         oninput="this.classList.toggle('has-input', this.value.trim())">
  <a href="#" class="hide">Show password</a>
</div>

如果您不喜欢内联事件处理程序，那么这是相当吸引人的内容

document.getElementById('pwInput').addEventListener('input', function(e) {
  this.classList.toggle('has-input', this.value.trim())
}, false)

请注意，force doesn't work in IE上的classList.toggle()选项。如果需要支持，请尝试类似

this.classList[this.value.trim() ? 'add' : 'remove']('has-input')

Answer 2

只需在JavaScript中执行此操作：

document.addEventListener("keydown", function() {
    if (document.getElementById("pwInput").value != "") {
        document.querySelector(".hide").style.display = "inline";
    }
    else {
        document.querySelector(".hide").style.display = "none";
    }
});

.hide {
  display: none;
}

<div>
  <label>Password:</label>
  <input type="password" id="pwInput">
  <a href="#" class="hide">Show password</a>
</div>

这将检查每次按下键盘时输入的内容是否有任何内容，此外，它将双向起作用（例如如果用户删除密码，则锚点将消失。

Javascript-当输入中包含内容时按钮可见

2 个答案: