动态关闭 <input> 的自动填充菜单

Question

我正在尝试实现一个文本框组件。它应该允许用户在空白时使用自动填充菜单填充输入；如果输入中有任何文本，则禁用自动填充，如果同时显示，则关闭自动填充菜单。

我尝试在触发更改事件时设置输入的自动完成属性。该值可以正确翻转，但关闭该值不会关闭自动填充菜单。想知道是否有 javascript 解决方案。

html:

<input id="addrBox" name="addrBox" autocomplete="off" class placeholder="Start typing your address to get auto-suggestions…">

js:

$('#addrBox').on('click focus change keydown', function(){
    var val = $('#addrBox').val(); 
    if(val.length){
        $('#addrBox').attr('autocomplete', 'off')
    }
    else{
        $('#addrBox').attr('autocomplete', 'on')
    }
})

屏幕截图：
我单击空白输入框，它显示了预期的自动填充菜单。然后我继续输入1，autocomplete属性关闭了，但是菜单还在。

Answer 1

了解如何关闭自动填充菜单。可以通过将自动完成设置为 new-password 而不是 off 来完成。

$('#addrBox').on('mouseup keyup', function(){
    var val = $('#addrBox').val(); 
    val = val.length;
    if(val === 0){
        $('#addrBox').attr('autocomplete', 'on');
    }
    else{
        $('#addrBox').attr('autocomplete', 'new-password');
    }
}).on('mousedown keydown', function(){
    var val = $('#addrBox').val(); 
    var length = val.length;
    if(!length){
        $('#addrBox').attr('autocomplete', 'new-password');
    }    
})

引用是

动态关闭 <input> 的自动填充菜单

Dynamically dismiss autofill menu of <input>

html

javascript

autocomplete

input

autofill