如果用户使用Google chrome的自动填充选项填写表单，则检测到

Question

[如果有人可以指导我如何检测用户是否使用Google chrome的自动填充选项填写表单。

我有一条指令，用户每次填写该字段并更改模糊效果时，都会向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

基于input-directive src，角度为更改，输入，粘贴等情况设置了一个侦听器。>

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

因此，最终您可以避免附加作用域。$ watch，仅依靠$ parsers发送ga跟踪事件，仅在每个输入元素与指令的链接阶段进行。而且顺便说一句，不要忘记在首次使用后立即破坏解析器功能（即浏览器自动填充），因此它不会在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);
        }
      }
    };
  });
希望这会有所帮助。

Answer 2

您可以在此处使用两种方式的数据绑定，并在表单字段上查看ng模型的更改

Answer 3

在这种情况下，检测Chrome何时自动填充表单而不是由用户执行表单的方法是通过检测是否没有发生诸如keyup事件之类的事件来进行。考虑下面的HTML和Javascript块。我将文本输入字段标记为最初设置为false的数据属性。如果用户通过键入填写表单中的任何内容，则该属性将设置为true。记录用户是否填写表单的那一刻即提交表单。然后，您可以检查表单的字段，并查看用户是否输入了他或她自己的输入。