如何确定Chrome表单中不含信用卡字段？

Question

谷歌浏览器过于热心，认为我的HTML表单包含信用卡信息，因此建议填写信用卡信息。

有没有任何属性可以告诉谷歌浏览器，在这个表单中没有需要填写的信用卡信息？

它试图填写信用卡信息的字段名是：

• reg_id（在这里放置一个信用卡号码）
• emergency_first_name（在这里放置名字）
• emergency_last_name（在这里放置姓氏）

如果可以不必禁用自动完成功能就最好了。

让人沮丧的是谷歌浏览器有一种“自以为是”的态度，它忽略了所有autocomplete的值，包括off：

<input autocomplete="off" value="" size="10" maxlength="10" id="id_reg_id" name="reg_id" type="text">

编辑：更新以下答案。

- Andre M

---

虽然这不是对问题的回答，但这个答案提供了一些关于Chromium表单检测的有见地的信息。https://dev59.com/m73pa4cB1Zd3GeqPe3ml#64143471 - Geoffrey H.

Answer 1

尝试一下

使用类型为"自定义(custom)"的输入框

或者使用只有一行且关闭调整大小功能的文本域。

- JustAClue

Answer 2

你的浏览器默认不应该记住你的信用卡号码 - 我只能假设你输入了一个带有“通用”autocomplete值的字段。您可以通过在预填选项下拉菜单中选择它（使用箭头键）并按下Delete来强制浏览器忘记此信息。

至于防止它出现在某些字段中，这取决于您希望每个字段保存什么信息，但是有广泛的autocomplete值可供使用。您可以使用number作为ID，而您提到的另外两个字段实际上带有专门的autocomplete值，即given-name和family-name：

<input name="reg_id" autocomplete="number" />
<input name="emergency_first_name" autocomplete="given-name" />
<input name="emergency_last_name" autocomplete="family-name" />

如果“数字”不够用，您还可以使用JavaScript正则表达式来进一步限制输入：

const regex = new RegExp("^[a-zA-Z]+$");
const form = document.getElementsByTagName('form')[0];
const reg_id = document.getElementsByTagName('input')[0];

form.addEventListener('click', function(e) {
  e.preventDefault();
  if (regex.test(reg_id)) {
    this.submit();
  }
});

<form>
  <input name="reg_id" autocomplete="number" />
  <input name="emergency_first_name" autocomplete="given-name" />
  <input name="emergency_last_name" autocomplete="family-name" />
</form>

- Obsidian Age

---

看起来Chrome更聪明，它会忽略任何自动填充的值。我甚至将其设置为off!！我会在问题中更新这一点。 - Andre M

Answer 3

我因此已经在桌子上撞了一段时间的头。我们有表单来输入仪器测试数据，其中有一个名为“测试卡号”的字段，以及“试剂盒（有效期）”字段。你猜Chrome认为这些字段是用来做什么的？

不用说，当他们输入临床研究数据时，我非常确定用户会非常生气看到chrome 我们试图提取他们的信用卡信息。

即使autocomplete="new-password"和autocomplete="nope"也无法解决问题。

我尝试在没有标签的情况下加载字段，并在JavaScript中动态添加它。但不起作用。使用HTML实体代替字符。还是不行。

好吧，在搜索了几个小时后发现了一个解决办法：在有问题的标签的每个单词中插入几个随机的 - （对于我而言，“测试卡号”中的“卡”和“号”都必须插入）。测试一直保持不变。

可以很容易地编写一个JavaScript扩展/实用程序函数来拆分有问题的标签的HTML，并将该不可见span放在中间（以及一个函数来删除它，以防需要使用标签值）。

类似这样（使用jQuery和旧的js标准，因为我们支持旧浏览器，没有验证标签是否缺失或为空，所以请相应地进行调整。实际上，我相信可以使用正则表达式或其他一些花哨的东西，但我现在没有时间去折腾它）：

jQuery.fn.breakAutofill = function () {
    var $lbl = $("label[for='" + this[0].id + "']"),
        finalText = $lbl.html().split(" "),
        foilSpan = "<span style='display:none;'>-</span>";

    for (var idx in finalText) {
        var textVal = finalText[idx],
            midPos = Math.floor(textVal.length / 2);
        finalText[idx] = textVal.substr(0, midPos) + foilSpan + textVal.substr(midPos);
    }
    $lbl.html(finalText.join(" "));
}

然后您可以在文档准备就绪时调用它：

$("your_input_selector").breakAutofill();

希望这对某个人有所帮助。

- krokador