【问题标题】:Is there a way to hide native browser form input autocomplete on form submit with enter key有没有办法在使用输入键提交表单时隐藏本机浏览器表单输入自动完成
【发布时间】:2014-08-31 17:22:25
【问题描述】:

我想隐藏本机浏览器自动完成,如果它已显示并且用户点击返回提交表单。

如果我的表单如下所示:

<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/

场景:

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

  • 用户点击回车提交表单

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

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

这是否可以隐藏自动完成功能,还是我只能像这样关闭它:

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

我知道我可以这样做并添加自定义自动完成功能。但如果我可以避免它,我希望使用本机自动完成功能。

【问题讨论】:

  • 我怀疑除了完全隐藏它之外还有其他方法。每个浏览器都会按照自己的方式进行操作,并且它们所做的事情在 DOM 中没有表示,因此您没有“钩子”来开始操纵默认行为。
  • 是的,我认为情况就是这样。

标签: javascript jquery html forms autocomplete


【解决方案1】:

通过在提交时的输入中使用 .blur().focus(),自动完成功能在最新版本的 Chrome 中消失了。不过还没有在其他浏览器上测试过。

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

DEMO

【讨论】:

  • 好主意!自动完成将挂钩这些事件是有道理的。似乎在Firefox中工作,这对我来说已经足够了。将标记为答案
  • 对我来说很棒!我有一个自动完成功能,它覆盖了搜索框下的结果。
猜你喜欢
  • 2020-02-23
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-02-05
  • 1970-01-01
相关资源
最近更新 更多