javascript - div失去焦点时如何关闭div?

标签 javascript css angularjs blur focusout

我在这里做了一个简单的plunkr http://plnkr.co/edit/zNb65ErYH5HXgAQPOSM0?p=preview

我创建了一个小的日期选择器我希望它在你聚焦时关闭它自己(focusout of datepicker)如果我在输入上放置模糊我无法使用日期选择器,如果我将 focusout 事件放在 datepicker 它不会行得通

我也试过:

angular.element(theCalendar).bind('blur', function () {
    $scope.hideCalendar();
});

但它不起作用。

有什么线索吗?

最佳答案

这是因为您在有机会做任何事情之前就删除了该元素,这是一个有效的示例:

http://plnkr.co/edit/mDfV9NLAQCP4l7wHdlfi?p=preview

只需添加一个超时:

thisInput.bind('blur', function () {
  $timeout(function(){
    $scope.hideCalendar();
  }, 200);
});

您是否考虑过使用现有的日期选择器?像 angularUI 或 angular-strap: http://mgcrea.github.io/angular-strap/##datepickers

更新:

不是一个完整的解决方案,但应该让你更接近:

    angular.element($document[0].body).bind('click', function(e){
      console.log(angular.element(e.target), e.target.nodeName)
      var classNamed =  angular.element(e.target).attr('class');
      var inThing = (classNamed.indexOf('datepicker-calendar') > -1);
      if (inThing || e.target.nodeName === "INPUT") {
        console.log('in');
      } else {
        console.log('out');
          $timeout(function(){
            $scope.hideCalendar();
          }, 200);
      }
    });

http://plnkr.co/edit/EbQl5xsCnG837rAEhBZh?p=preview

然后您要做的是监听页面上的点击,如果点击在日历之外,则关闭它,否则什么也不做。以上仅考虑到您正在单击具有包含 datepicker-calendar 的类名称的内容,您需要对其进行调整,以便在日历内单击也不会关闭它。

关于javascript - div失去焦点时如何关闭div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25769345/

相关文章:

php - 加载页面时如何为html标签设置类?

html - CSS3::selection 不覆盖整个页面

javascript - 简单的 Javascript 无法在 Internet Explorer 上运行

javascript - 我可以在react 'render'语句中分配变量吗

javascript - 如何使用 ExtJS 5 Ext.data.Model 字段引用(与 ExtJS 4 中的 ownTo 相比)

javascript - 使用 Angular JS 内联模板上的 404

javascript - AngularJS:指令中的 element.show() 不起作用

javascript - 具有单个文件组件的 Vuejs 嵌套组件

css - 如何将 CSS 样式设置为 div 使其看起来像带有标签的 GUI 控制框?

javascript - 通过打开 ControllerAs 将 $scope 替换为此值