如何判断 Chrome 表单不包含信用卡字段？答案

【问题标题】：How to tell Chrome form does not contain credit card fields?如何判断 Chrome 表单不包含信用卡字段？
【发布时间】：2019-07-25 05:33:02
【问题描述】：

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

我是否可以使用任何属性告诉 Chrome 在此表单中没有要填写的信用卡信息？

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

reg_id（这里输入抄送号码）
emergency_first_name（这里输入名字）
emergency_last_name（这里输入姓氏）

如果不需要，我不想禁用自动完成功能。

这里令人沮丧的是 Chrome 的“知道得更好”的态度，它忽略了对 autocomplete 的任何价值，包括 off：

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

编辑：更新了以下答案。

【问题讨论】：

虽然这不是问题的答案，但这里的答案提供了有关 Chromium 表单检测的一些有见地的信息。 stackoverflow.com/a/64143471/2708601

标签： html forms

【解决方案1】：

试试

输入类型="自定义"

或使用单行文本区域并调整大小

【讨论】：

【解决方案2】：

默认情况下，您的浏览器不应该记住您的信用卡号——我只能假设您输入了一个具有“通用”autocomplete 值的字段。您始终可以强制浏览器忘记此信息，只需在预填充选项下拉列表中选择它（使用箭头键）时点击 Delete。

至于防止它出现在某些字段中，这取决于您希望每个字段保存什么信息，但是您可以使用 wide array 的 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" />

如果number 实在不行，你也可以使用 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>

【讨论】：

看起来 Chrome 知道得更好，只是忽略了自动完成的任何值。我什至把它给off!！我会用这个更新问题。

【解决方案3】：

因为这个原因，我已经把头撞在桌子上一段时间了。我们有用于输入仪器测试数据的表格，以及一个名为“测试卡号”的字段，以及“套件（到期日期）”。猜猜 Chrome 认为这些字段的用途是什么？

不用说，我很确定用户在输入临床研究数据时看到 ~~chrome~~ us 试图提取他们的 CC 信息会非常沮丧.

在这里，即使 autocomplete="new-password" 和 autocomplete="nope" 也没有任何好处。

我尝试加载没有标签的字段并在 javascript 中动态添加。没有骰子。使用 html 实体而不是字符。没有。

好吧，在网上搜索了几个小时而没有看到任何解决方案之后，我想出了一个办法：在有问题的标签的每个单词中插入一些随机的。（对我来说，使用测试卡号，它必须同时在卡和号码中。测试可以不用管）。

人们可以很容易地编写一个 javascript 扩展/实用程序函数来拆分有问题的标签的 html，然后将不可见的跨度拍到中间（以及在需要使用标签值的情况下将其删除）。

类似这样的东西（使用 jQuery 和旧 js 标准，因为我们支持旧浏览器，如果标签丢失或为空，则无需验证，因此相应地进行调整。事实上，我确信可以使用正则表达式或其他一些花哨的东西，但我没有时间摆弄它atm）：

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();

我希望对某人有所帮助。

【讨论】：