使用Javascript - 按钮时可见有在输入内容

Question

我想，当用户在特定的输入文本信息插入，另一元素变得可见。我的问题看起来的研究，但我是新JavaScript的世界，我已经尝试在谷歌搜索，并在这里，但我没能发现任何东西。

看看我的代码：

.hide {
  display: none;
}

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

我要的是，当密码输入有内部内容的“显示密码”锚只显示。

Answer 1

超级简单的选择......使用的<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)

---

请注意，在qazxsw POI qazxsw POI的POI qazxsw选项。如果你需要支持的话，你可以试试

force

Answer 2

只是这样做在JavaScript：

classList.toggle()

doesn't work in IE

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

这将检查每一个的keydown如果输入有任何内容，再加上它会工作左右逢源例如如果用户删除了密码，然后锚会自行消失。