与 JavaScript 相比，从 HTML 设置属性时的不同行为
[英]Different behavior when setting attribute from HTML compared to JavaScript
问题描述
I am trying to prevent Chrome from showing auto fill dropdown on incorrect text boxes and found that one workaround is to set the autocomplete attribute to one-time-code .
我试图阻止 Chrome 在不正确的文本框上显示自动填充下拉菜单，并发现一种解决方法是将autocomplete属性设置为one-time-code 。
This prevents the auto fill/dropdown from appearing if I put this attribute in the HTML template directly...如果我将此属性直接放在 HTML 模板中，这将防止出现自动填充/下拉菜单...
<input type=“text” ... autocomplete=“one-time-code” />
...but doesn't work if I use the following JS code to set it globally for all text boxes: ...但是如果我使用以下 JS 代码为所有文本框全局设置它，则不起作用：
$(document).on(“focus”, “input”, function() {
this.setAttribute(“autocomplete”, “one-time-code”);
});
I see at runtime that the attribute gets added to the input elements, but it no longer disables the auto fill/dropdown on those elements (the way the HTML edit did).我在运行时看到该属性被添加到输入元素中，但它不再禁用这些元素的自动填充/下拉（HTML 编辑的方式）。
Why would the behavior be different when I modify the HTML template compared to when I do it through JavaScript?为什么我修改 HTML 模板时的行为与我通过 JavaScript 修改时的行为不同？ Is there any way to make it work through JS as well?有没有办法让它也通过 JS 工作？
1 个解决方案
解决方案1
0 2021-04-07 01:41:45
Its most likely a matter of when the event handlers run vs when the browser tries to actually populate the fields.这很可能是事件处理程序何时运行与浏览器何时尝试实际填充字段的问题。 Run the snippet below... you'll notice that the focus event that fires on "input" doesn't run unless you actually click into a text box... whereas the focus event that fires on null runs any time you click out of the window and then back into the window... if you don't click in the box itself, but just click the up arrow you can set the value to 5... if you then click into the box the on focus "input" event is handled and the input is flagged as invalid...运行下面的代码片段...您会注意到，除非您实际单击文本框，否则在“输入”上触发的焦点事件不会运行...而在 null 上触发的焦点事件在您单击时随时运行window 然后回到 window ...输入”事件被处理并且输入被标记为无效...
My guess is that your focus event is firing after autocomplete fills the boxes... consider using an onFocus with null trigger instead of input and then select all your input boxes from within the handling function as I did in the snippet...我的猜测是，您的焦点事件在自动完成填充框后触发...考虑使用带有 null 触发器而不是输入的 onFocus，然后使用 select 处理 ZC1C425268E68385D1AB5074C1 片段中的所有输入框...
$(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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.