我正在尝试实现一个文本框组件。它应该允许用户在空白时使用自动填充菜单填充输入;如果输入中有任何文本,则禁用自动填充,如果同时显示,则关闭自动填充菜单。
我尝试在触发更改事件时设置输入的自动完成属性。该值可以正确翻转,但关闭该值不会关闭自动填充菜单。想知道是否有任何 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,自动完成属性被关闭,但是菜单还在。
最佳答案
弄清楚如何关闭自动填充菜单。可以通过将自动完成设置为 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');
}
})
关于javascript - 动态关闭 <input> 的自动填充菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39584213/