与 JavaScript 相比，从 HTML 设置属性时的不同行为

问题描述

我试图阻止 Chrome 在不正确的文本框上显示自动填充下拉列表，发现一种解决方法是将 autocomplete 属性设置为 one-time-code。

如果我将此属性直接放入 HTML 模板，这将阻止自动填充/下拉菜单出现...

<input type=“text” ... autocomplete=“one-time-code” />

...但如果我使用以下 JS 代码为所有文本框全局设置它，则不起作用：

$(document).on(“focus”,“input”,function() {
    this.setAttribute(“autocomplete”,“one-time-code”);
});

我在运行时看到属性被添加到输入元素，但它不再禁用这些元素的自动填充/下拉（HTML 编辑的方式）。

为什么我修改 HTML 模板时的行为与我通过 JavaScript 修改时的行为不同？有没有办法让它也通过JS工作？

解决方法

这很可能是事件处理程序何时运行与浏览器何时尝试实际填充字段的问题。运行下面的代码片段...您会注意到，除非您实际单击文本框，否则触发“输入”的焦点事件不会运行...而每次单击退出时触发的焦点事件都会运行在 null窗口，然后返回窗口...如果您不单击框本身，而是单击向上箭头，您可以将值设置为 5...如果您然后单击框内的焦点“ input”事件被处理并且输入被标记为无效...

我的猜测是您的焦点事件在自动完成填充框后触发...考虑使用带有空触发器的 onFocus 而不是输入，然后像我在代码片段中所做的那样从处理函数中选择所有输入框.. .

$(document).ready(function() {
  console.log('In Document.Ready');
  $(document).on("focus",null,function() {
    console.log('Focus on Document with Null Selector');
    $('input').each(function(index) {
      this.setAttribute("max","5");

    })
  });
  $(document).on("focus","input",function() {
    console.log('Focus on Document with Input Selector');
    this.setAttribute("max","3");
  });
});

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div>
    <input type="number" min="1" max="5">
  </div>
</body>

</html>

javascript

与 JavaScript 相比，从 HTML 设置属性时的不同行为

问题描述

解决方法

相关问答