文本输入框被浏览器自动填充用户名，求HTML/AngularJS解决方案

我太懂这种浏览器自动填充乱入搜索框的烦恼了，之前踩过同款坑，试了好几种方法才找到靠谱的解决思路，下面给你几个亲测有效的方案，你可以根据自己的AngularJS项目情况选择：

现代浏览器经常会忽略autocomplete="off"，但你可以给它设置一个浏览器不会关联到登录信息的特殊值，比如：

<input type="text" class="form-control search-field" placeholder="Search Item" 
       ng-model="vm.applyCategFoodSearch" autocomplete="new-password" 
       name="txtFieldForSearchItems">

原理：很多浏览器会把autocomplete="new-password"判定为“不需要自动填充的新密码输入框”，不会把已保存的用户名填进去，这个方法对Chrome、Firefox这类主流浏览器都有效。

写一个简单的指令，在输入框渲染完成后强制清空，同时监听浏览器可能的延迟填充：

angular.module('你的项目模块名').directive('disableAutoFill', ['$timeout', function($timeout) {
  return {
    link: function(scope, element) {
      // 用$timeout(0)确保在AngularJS digest循环后执行，覆盖浏览器自动填充
      $timeout(function() {
        element.val('');
        // 同步更新ng-model，避免视图和模型不一致
        scope.$apply(function() {
          scope.vm.applyCategFoodSearch = '';
        });
      }, 0);

      // 监听input事件，处理浏览器延迟填充的情况
      element.on('input', function() {
        if (element.val() !== scope.vm.applyCategFoodSearch) {
          $timeout(function() {
            element.val('');
            scope.vm.applyCategFoodSearch = '';
          });
        }
      });
    }
  };
}]);

然后给你的输入框加上这个指令：

<input type="text" class="form-control search-field" placeholder="Search Item" 
       ng-model="vm.applyCategFoodSearch" autocomplete="off" 
       name="txtFieldForSearchItems" disable-auto-fill>

如果不想写指令，也可以在页面完全加载后（确保浏览器完成自动填充）直接操作DOM：

// 原生JS版本
window.addEventListener('load', function() {
  const searchInput = document.querySelector('input[name="txtFieldForSearchItems"]');
  if (searchInput) {
    searchInput.value = '';
    // 同步到AngularJS模型
    angular.element(searchInput).scope().vm.applyCategFoodSearch = '';
    angular.element(searchInput).scope().$apply();
  }
});

// jQuery版本
$(window).load(function() {
  const $searchInput = $('input[name="txtFieldForSearchItems"]');
  $searchInput.val('');
  $searchInput.scope().vm.applyCategFoodSearch = '';
  $searchInput.scope().$apply();
});

原理：window.load事件会在所有资源加载完成后触发，包括浏览器的自动填充操作，这时候清空能精准覆盖浏览器填的内容。

如果上面的方法都不管用，可以试试这个“障眼法”：在真实搜索框前面放两个隐藏的假输入框，让浏览器优先填充它们：

<!-- 放在真实输入框前面，绝对定位隐藏 -->
<input type="text" style="display: none; position: absolute; left: -9999px;" 
       autocomplete="username" name="fake-username">
<input type="password" style="display: none; position: absolute; left: -9999px;" 
       autocomplete="password" name="fake-password">

<!-- 你的真实搜索框 -->
<input type="text" class="form-control search-field" placeholder="Search Item" 
       ng-model="vm.applyCategFoodSearch" autocomplete="off" 
       name="txtFieldForSearchItems">

原理：浏览器会优先填充带有autocomplete="username"/password标记的字段，把这些假字段藏起来，浏览器就不会碰你的搜索框了。

内容的提问来源于stack exchange，提问作者Faseeh Haris