javascript - 表格: password with images?

Question

我正在尝试以 PHP 表单实现一个密码字段，其中密码是一系列数字，但用户必须选择正确的图像(从 0 到 9，就像一些网上银行帐户一样)。 我怎样才能做到这一点？ 谢谢!

我想我必须监 View 像上的每个 onClick，然后相应地修改变量，但我不知道该怎么做，我可以使用 PHP，但我的 javascript 技能很低:)

所以我的逻辑是。当 onClick 在图像上时，它会触发函数 image()，该函数会将变量“password”设置为图像的值与之前的“password”值相连接。所以我的问题是:这个函数如何处理多张图像？以及如何连接，以便当单击 image1、image3、image2 时，“password”将获得值:“132”。 谢谢!

function image() {
  var password = document.getElementById("image").value;
}

<img id="image" src="image1.png" value="1" onClick="image();">

Answer 1

对于工作片段，我手动添加了所有图像 - 您可以使用 PHP 中的循环“更好”地做到这一点:

<?php for ($i = 0; $i <= 9; $i++) { ?>
<img id="password-digit-<?php echo $i; ?>" src="password-digit-<?php echo $i; ?>.png" alt="<?php echo $i; ?>" data-digit="<?php echo $i; ?>">
<php } ?> 

如果您希望密码输入不可见，请使用hidden属性，例如:

<input type="password" hidden>

并且，要通过 HTML 表单将其发送到某个 PHP 端点，请添加 name 属性。

<input type="password" name="password">

const images   = document.querySelectorAll('img[id^="password-digit"]')
const password = document.getElementById('password');

images.forEach(img => {
  img.addEventListener('click', () => {
    password.value = password.value + img.dataset.digit;
    console.log('Current password:', password.value);
  });
});

<img id="password-digit-0" src="password-digit-0.png" alt="0" data-digit="0">
<img id="password-digit-1" src="password-digit-1.png" alt="1" data-digit="1">
<img id="password-digit-2" src="password-digit-2.png" alt="2" data-digit="2">
<img id="password-digit-3" src="password-digit-3.png" alt="3" data-digit="3">
<img id="password-digit-4" src="password-digit-4.png" alt="4" data-digit="4">
<img id="password-digit-5" src="password-digit-5.png" alt="5" data-digit="5">
<img id="password-digit-6" src="password-digit-6.png" alt="6" data-digit="6">
<img id="password-digit-7" src="password-digit-7.png" alt="7" data-digit="7">
<img id="password-digit-8" src="password-digit-8.png" alt="8" data-digit="8">
<img id="password-digit-9" src="password-digit-9.png" alt="9" data-digit="9">

<hr>

<input id="password" type="password" value="">