如何通过点击按钮/输入框为另一输入框赋值（ATM密码输入场景）

错误点说明 #

• 原JS代码中const pinPassword = document.getElementById('pin').value获取的是输入框的初始值字符串，不是输入框DOM元素本身，无法通过修改它的value属性更新输入框内容
• 原add方法是直接覆盖输入框的值，不是追加内容，不符合ATM密码逐位输入的逻辑

修正代码 #

JS部分 #

// 获取输入框DOM元素，而非其初始值
const pinInput = document.getElementById('pin');

function add(num) {
  // 匹配输入框maxlength限制，最多输入4位
  if (pinInput.value.length < 4) {
    // 追加数字到输入框末尾
    pinInput.value += num;
  }
}

可选扩展：补全数字按键 #

在现有form中按照以下格式补充0-9其余数字按钮即可：

<input type="button" value="2" onclick="add(this.value)">
<input type="button" value="3" onclick="add(this.value)">
<!-- 按需补充4-9、0的按钮 -->

可选扩展：退格功能 #

新增退格按钮：

<input type="button" value="退格" onclick="deleteLast()">

新增对应JS逻辑：

function deleteLast() {
  // 移除输入框最后一位字符
  pinInput.value = pinInput.value.slice(0, -1);
}

内容的提问来源于stack exchange，提问作者Filip Burski