动态关闭<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，自动完成属性被关闭，但菜单仍在那里。

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');
    }    
})

引用为https://stackoverflow.com/a/36584903/2177408