javascript - 有没有办法在使用 Enter 键提交表单时隐藏 native 浏览器表单输入自动完成功能

Question

我想隐藏 native 浏览器自动完成功能(如果已显示)并且用户点击返回提交表单。

如果我的表单如下所示:

<form id="test-form" method="POST">
<input type="text" name="autoCompleteTestThang"/>
<button class="btn" type="submit" name="autoCompleteTestThang">Click Mee</button>

我的js是这样的:

$('#test-form .btn').click(function(event){
event.preventDefault();

// I'd be an ajax request really
console.log('Event Handled');
});

http://jsfiddle.net/7kC83/

场景:

• 表单中的用户类型和 native 浏览器自动完成功能已填充

• 用户按 Enter 键提交表单

• 由于这是一个ajax调用event.preventDefault();阻止所有默认表单事件处理

• 自动完成建议列表仍然存在，用户必须单击以取消焦点并删除...这是我不想要的。

这是否可以隐藏自动完成功能，或者我是否必须将其关闭，例如:

<input type="text" name="noAutoComplete" autocomplete="off" />

我知道我可以做到这一点并添加自定义自动完成功能。但如果我可以避免它，我希望使用 native 自动完成功能。

Answer 1

通过在提交时的输入上使用 .blur() 和 .focus()，自动完成功能会在最新版本的 Chrome 中消失。但尚未在其他浏览器中进行测试。

$('#test-form .btn').click(function(event){
    event.preventDefault();
    console.log('Event Handled');
    $('input:first').blur();
    $('input:first').focus();
});

DEMO