javascript - 动态关闭 <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