js input 实现输入框 中间内容显示星号 两边内容明文展示

您可以使用oninput事件监听输入框的输入，然后使用JavaScript的字符串截取和替换方法将输入框中的内容分成左右两部分并进行处理，最后将处理后的内容显示在输入框中。

以下是一个简单的示例代码：

HTML:

<input type="text" id="password" oninput="handleInput()" />

JavaScript:

function handleInput() {
  const passwordInput = document.getElementById("password");
  const passwordValue = passwordInput.value;
  const passwordLength = passwordValue.length;

  if (passwordLength === 0) {
    return;
  }

  const middleIndex = Math.floor(passwordLength / 2);
  const leftPart = passwordValue.substring(0, middleIndex);
  const rightPart = passwordValue.substring(middleIndex);

  const maskedLeftPart = leftPart;
  const maskedRightPart = rightPart.replace(/./g, "*");

  passwordInput.value = maskedLeftPart + maskedRightPart;
}

这个函数会在每次输入框中输入时被调用。它首先获取输入框中的值和长度，然后计算出中间位置。接下来，它将输入框中的内容分成左右两部分，并用星号替换右半部分。最后，它将处理后的左右两部分内容合并并显示在输入框中。