Question

我有这个片段，可以在焦点事件中将输入类型从文本更改为数字，然后返回到模糊事件上的文本。

似乎在Firefox中，更改类型会触发模糊，这意味着您永远无法获得焦点。

这是一个已知的错误，是否有解决方法？

<div id="Menu" class="menu-icon">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>

<div id="mySidenav" class="sidenav">
<!--Start Side Nav-->
<a href="#">Our Story</a>
<a href="#">Products</a>
<a href="#">Contact Us</a>
<a href="#">Login/Sign up</a>
</div>

angular.module('myApp', [])
  //.controller('MainController', MainController)
  .directive("test", function() {
    return {
      restrict: "A",
      link: function(scope, element, attr) {

        element.bind("blur", function() {
          scope.$apply(function() {
            element.attr("type", "text");

          });
        });

        element.bind("focus", function() {
          scope.$apply(function() {
            element.attr("type", "number");

          });
        });
      }
    };
  });


function MyCtrl($scope) {
  $scope.test = 90;
}

Answer 1

我刚刚发现了这个解决方法：在focus（）事件中，只需在更改输入类型之前禁用模糊事件，然后在更改后重新启用。

我的代码snipplet（Angular 4）：

@HostListener("focus", ["$event"])
onFocus($event) {
    const onBlur = this.onBlur;
    this.onBlur = (e) => {};
    ...
    $event.target.type = "number";
    this.onBlur = onBlur;
}

@HostListener("blur", ["$event"])
onBlur($event) {
    $event.target.type = "text";
}

希望它有所帮助; - ）

更改输入类型时Firefox会模糊

1 个答案: