在 keydown/keyup 上切换显示/隐藏密码答案

【问题标题】：Toggle show/hide password on keydown/keyup在 keydown/keyup 上切换显示/隐藏密码
【发布时间】：2018-12-12 03:51:00
【问题描述】：

我想在且仅当用户单击并按住按钮时才显示密码。这意味着当用户释放点击时，它应该再次被隐藏。我已经尝试过onkeyup 和onkeydown，但目前还没有。

function show() {
  $(pass).attr("type", "text");
}

function hide() {
  $(pass).attr("type", "password");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type='password' id='pass' value='abcdef' />
<button onkeydown='show()' onkeyup='hide()'>toggle</button>

我在这里错过了什么？

【问题讨论】：

标签： javascript jquery html input passwords

【解决方案1】：

您正在寻找 mousedown 和 mouseup 处理程序：

function show() {
  $(pass).attr("type", "text");
}

function hide() {
  $(pass).attr("type", "password");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type='password' id='pass' value='abcdef' />
<button onmousedown='show()' onmouseup='hide()'>toggle</button>

【讨论】：

哦.. 从来不知道有onmouseup。谢谢老哥！

【解决方案2】：

您需要onmousedown 和onmouseup。要使其适合移动设备，请使用 ontouchstart 和 ontouchend。

function show() {
  document.getElementById("pass").setAttribute("type","text");
}

function hide() {
  document.getElementById("pass").setAttribute("type","password");
}

<input type='password' id='pass' value='abcdef' />
<button onmousedown='show()' onmouseup='hide()'>toggle</button>

【讨论】：