AngularStrap datepicker在IOS Safari浏览器中的触发事件模糊时不会消失

时间:2016-02-02 07:29:30

标签: ios angularjs safari blur angular-strap

我的日期选择器可以在Windows Chrome浏览器,Windows Safari,Mac Safari,Android浏览器的触发事件模糊中消失,除了IOS Safari浏览器。

我的代码:

<input class="title-menu-left-input form-control"
        name="birthday" data-date-format="yyyy-MM-dd"
        data-date-type="string" data-autoclose="1"
        ng-model="dateFrom" placeholder="date" data-trigger="focus"
        bs-datepicker>

任何人都可以帮助我找到为什么它在IOS safari浏览器中的触发事件模糊中不会消失?提前谢谢!

有一些背景可能会帮助您更多地了解我的问题。您可以访问此页面http://mgcrea.github.io/angular-strap/#/datepickers或plunker:http://plnkr.co/edit/lUtYyIqD4ETCG5zbKrNC?p=preview。我的代码和它一样。我不知道为什么它会在Windows Chrome浏览器,Windows Safari,Mac Safari,Android浏览器的触发事件模糊中消失,除了IOS Safari浏览器。我想知道我是否在IOS Safari中做了特殊处理。有人问过这个问题吗?

2 个答案:

答案 0 :(得分:0)

另一个源代码呢?它应该有一个按钮来打开日期选择器弹出窗口,有些来自控制器

答案 1 :(得分:0)

问题是iPad上没有触发“模糊”事件。因此,当用户触摸日历输入和下拉列表之外的屏幕时,我会手动触发该事件。

controller: ['$scope', function ($scope) {

  function isiPadiPhone () {
    return ((navigator.userAgent.match(/iPad/i) != null) ||
      (navigator.platform.indexOf("iPhone") != -1) ||
      (navigator.platform.indexOf("iPod") != -1));
  }


  if (isiPadiPhone()) {
    document.body.addEventListener("touchend", handleTouchEnd, false);

    $scope.$on('$destroy', function () {
      document.body.removeEventListener("touchend", handleTouchEnd, false);
    });
  }

  function handleTouchEnd(event) {
    var dateInput = document.getElementById('your_input_id');
    var nextSibling = dateInput.nextSibling;

    if (!nextSibling || !nextSibling.classList || !nextSibling.classList.contains('dropdown-menu')) {
      //no calendar dropdown is shown now
      return;
    }

    if (isParent(event.target, nextSibling)) {
      return;
    }

    if (isParent(event.target, dateInput)) {
      return;
    }

    //we have to fire 'blur' event manually on iPad
    dateInput.blur();
  }


  function isParent(element, parent) {
    while (element != null) {
      if (element === parent) {
        return true;
      }

      element = element.parentNode;
    }

    return false;
  }

 }