检测用户是否使用Google Chrome的自动填充选项填写表单

Question

如果有人可以指导我如何检测用户是否使用谷歌浏览器的自动填充选项填写表单.

我有一个指令,每次用户填写该字段并更改模糊时,都会向Google Analytics发送一个事件.

但我还需要检测用户是否已使用chrome的自动填充选项填充表单,并将每个字段的数据推送到Google Analytics.

我的指令的一部分:

element.bind('blur', function (e) {
  if ((e.target.value !== 0) && typeof value !== 'undefined')  {
    if (_.has(ga_data, 'sendEvent')) {
      analyticsService.sendEvent(ga_data.sendEvent);
    }

    if (_.has(ga_data, 'action') && ga_data.action === 'blur') {
      analyticsService.sendEvent(ga_data);
    }
  }
});

Answer 1

基于输入指令 src，Angular 为更改、输入、粘贴等情况设置了一个监听器。

每当浏览器自动填充输入元素时，都会调用此侦听器，并通过 $parsers 数组提交 viewValue，从这里的ngModel 指令 src开始。

因此，最终您可以避免额外的范围。 $watch 并仅依靠 $parsers 在每个输入元素与指令的链接阶段发送 ga track 事件。顺便说一句，不要忘记在第一次使用后立即销毁解析器函数（即浏览器自动填充），这样它就不会在 viewValue 更改时进一步发送垃圾邮件。

这是一个例子：

angular
  .module('app', [])
  .directive('detectPrefill', function() {
    return {
      require: 'ngModel',
      link: { 
        pre: function(scope, element, attrs, ctrl) {
          function detectPrefill (viewValue) {
            //send GA data
            //...

            // just checking that detectPrefill func is destroyed after first usage                
            viewValue && console.log(viewValue);
            ctrl.$parsers.splice(
              ctrl.$parsers.indexOf(detectPrefill), 
              1
            );
            return viewValue;
          }

          ctrl.$parsers.push(detectPrefill);
        }
      }
    };
  });

希望这可以帮助。