js 获得密码输入框 输入前后输入后的长度

您可以使用 `onkeyup` 和 `onkeydown` 事件来分别获取密码输入框在用户输入之前和之后的长度。

以下是一个示例代码：

<input type="password" id="password" onkeydown="getLengthBefore()" onkeyup="getLengthAfter()">

<script>
function getLengthBefore() {
  var password = document.getElementById("password").value;
  var lengthBefore = password.length;
  console.log("输入前的密码长度为：" + lengthBefore);
}

function getLengthAfter() {
  var password = document.getElementById("password").value;
  var lengthAfter = password.length;
  console.log("输入后的密码长度为：" + lengthAfter);
}
</script>

在这个示例中，我们分别在 `onkeydown` 和 `onkeyup` 事件中调用了两个函数 `getLengthBefore` 和 `getLengthAfter`。前者会在用户按下键盘之前获取密码输入框的长度，后者会在用户输入之后获取长度。然后，我们使用 `console.log()` 方法输出长度信息到控制台。

如果您想在页面上显示密码长度，您可以使用 `innerHTML` 属性将其插入到 HTML 中。例如：

<p>密码长度： <span id="length"></span></p>

<script>
function getLengthAfter() {
  var password = document.getElementById("password").value;
  var length = password.length;
  document.getElementById("length").innerHTML = length;
}
</script>

在这个示例中，我们在一个段落中添加了一个空的 `span` 标签，并为其设置了一个 ID `length`。然后，在 `getLengthAfter` 函数中，我们获取密码输入框的长度，并将其赋值给 `span` 标签的 `innerHTML` 属性。这样，就可以实时在页面上显示密码输入框的长度了。