点击可交互元素向表单密码输入框追加文本的实现方法咨询

问题原因 #

1. 表单<input>元素的内容存储在value属性中，你使用的textContent只对普通展示类标签生效，对输入类表单元素无效。
2. 当前直接赋值的写法会每次点击覆盖原有内容，无法实现多点击拼接累加的效果。

修复后的基础实现代码 #

document.getElementById("one").addEventListener("click", onClickFunc);

function onClickFunc(e) {
  let ele = document.getElementById('pword');
  // 用value属性，+=实现内容追加
  ele.value += 'A1b2';
  alert("Function finished!");
}

更易扩展的优化方案 #

如果后续有多个可点击图像，不需要逐个绑定监听事件，给每个可点击容器增加自定义属性存储对应密码片段，用事件委托统一处理即可：

1. 修改HTML部分，给每个可点击元素增加data-pw-segment属性存储对应字符串：

<div class="cell" id="one" data-pw-segment="A1b2">
  <i class="fas fa-futbol "></i>
</div>
<!-- 其他图像同理配置 -->
<div class="cell" id="two" data-pw-segment="Xy78">
  <i class="fas fa-basketball-ball"></i>
</div>

2. 统一绑定事件的JS代码：

// 给所有图像的父容器绑定事件，自动匹配所有子点击项
document.querySelector('.grid').addEventListener('click', function(e) {
  const targetCell = e.target.closest('.cell');
  // 点击的不是可点击图像区域则直接返回
  if (!targetCell || !targetCell.dataset.pwSegment) return;
  // 追加对应片段到密码框
  document.getElementById('pword').value += targetCell.dataset.pwSegment;
});

补充注意事项 #

• 表单提交前直接读取document.getElementById('pword').value做哈希处理后再提交即可，不要提交明文内容。
• 如果需要添加回退删除上一次点击的功能，可以额外维护一个数组存储每次点击的密码片段，回退时删除数组最后一项后再重新拼接赋值给密码框的value即可。

内容的提问来源于stack exchange，提问作者Greg Harrison