Question

我正在尝试以PHP形式实现密码字段，该密码将是一个数字序列，但用户必须选择适当的图像（从0到9，而不是在键盘上输入数字）就像一些在线银行帐户一样）。我该怎么做？谢谢！

我想我必须监视每个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

图像元素不能具有value属性。我在下面的代码中使用了data属性来存储所需的值。我也用Javascript替换了您的嵌入式点击处理程序。易于维护和易于使用this来获取被单击的元素。

我用+=运算符将点击的数字添加到了输入值中。

Array.from(document.getElementsByClassName("image")).forEach(function(element) {
  element.addEventListener('click', image);
});

function image() {
  document.getElementById('password').value += this.getAttribute('data-number');
}

<img class="image" src="image1.png" data-number="1">
<img class="image" src="image2.png" data-number="2">
<img class="image" src="image3.png" data-number="3">

<input id="password">

Answer 2

对于有效的代码段，我手动添加了所有图像-您可以在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="">

形式：带图片的密码？

2 个答案: