下拉关闭焦点 [英] dropdown closes on focus

问题描述

我要触发下拉列表上重点投入领域的开放。
但它openes突然关闭每次我集中时间。
随着按钮切换一切正常。
下面是例子：
HTTP：//$c$cpen.io/piernik/pen/ByKRwE

下面是HTML

 ＆LT; D​​IV CLASS =输入组＆GT;
    ＆LT;输入类型=文本级=表格控NG焦=秀（$事件）＆GT;    ＆LT; D​​IV CLASS =输入组插件＆GT;＆LT; I类=发FA-FW FA-日历＆GT;＆LT; / I＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT;一类=BTN BTN-默认的NG点击=toggleDropdown（$事件）＆GT;拨动＆LT; / A＆GT;＆LT; D​​IV CLASS =下拉菜单下拉列表是开放=model.open＆GT;
    ＆LT; UL类=下拉菜单中选择角色=菜单＆GT;
        内容
    ＆LT; / UL＆GT;
＆LT; / DIV＆GT;
 

和JS：

  $ scope.model = {
                打开：假的
            };
            $ scope.toggleDropdown =功能（$事件）{
                。$事件preventDefault（）;
                $ event.stopPropagation（）;
                $ scope.model.open = $ scope.model.open！;
            };
            $ scope.show =功能（$事件）{
                。$事件preventDefault（）;
                $ event.stopPropagation（）;
                $ scope.model.open = TRUE;
            };
            $ scope.hide =功能（$事件）{
                。$事件preventDefault（）;
                $ event.stopPropagation（）;
                $ scope.model.open = FALSE;
            };
 

解决方案

这是因为发生click事件也是在您的输入，$ P $引发pventing其默认行为。

演示

JAVASCRIPT

  angular.module（'示范'，['ui.bootstrap']）  .controller（'DemoController'，函数（$范围）{    $ scope.open = FALSE;    $范围。prevent =功能（$事件）{
      $ event.stopPropagation（）;
      。$事件preventDefault（）;
    };    $ scope.focus =功能（$事件）{
      。$范围prevent（$事件）;
      $ scope.open = TRUE;
    };    $ scope.toggle =功能（$事件）{
      。$范围prevent（$事件）;
      $ scope.open = $ scope.open！;
    }  }）;
 

HTML

 ＆LT;输入类型=文本检查，如果失去焦点NG点击=prevent（$事件）NG模型=名的名称= 名NG焦点=聚焦（$事件）＆GT;
    ＆LT; D​​IV CLASS =BTN BTN-默认的NG点击=切换（$事件）＆GT;＆切换LT; / DIV＆GT;    ＆LT; D​​IV CLASS =下拉菜单下拉列表是开放=开放＆GT;
      ＆LT; UL类=下拉菜单中选择角色=菜单＆GT;
          内容
      ＆LT; / UL＆GT;
  ＆LT; / DIV＆GT;
 

I want to trigger dropdown open on focus on input field. But it openes and suddenly closes every time I focus. With button toggle everything is ok. Here is example: http://codepen.io/piernik/pen/ByKRwE

Here is HTML

<div class="input-group">
    <input type="text" class="form-control" ng-focus="show($event)">

    <div class="input-group-addon"><i class="fa fa-fw fa-calendar"></i></div>
</div>
<a class="btn btn-default" ng-click="toggleDropdown($event)">toggle</a>

<div class="dropdown" dropdown is-open="model.open">
    <ul class="dropdown-menu" role="menu">
        Content
    </ul>
</div>

And JS:

$scope.model = {
                open: false
            };
            $scope.toggleDropdown = function ($event) {
                $event.preventDefault();
                $event.stopPropagation();
                $scope.model.open = !$scope.model.open;
            };
            $scope.show = function ($event) {
                $event.preventDefault();
                $event.stopPropagation();
                $scope.model.open = true;
            };
            $scope.hide = function ($event) {
                $event.preventDefault();
                $event.stopPropagation();
                $scope.model.open = false;
            };

解决方案

This is happening because the click event is also triggering in your input, preventing its default behavior.

DEMO

JAVASCRIPT

angular.module('demo', ['ui.bootstrap'])

  .controller('DemoController', function($scope) {

    $scope.open = false;

    $scope.prevent = function($event) {
      $event.stopPropagation();
      $event.preventDefault();
    };

    $scope.focus = function($event) {
      $scope.prevent($event);
      $scope.open = true;
    };

    $scope.toggle = function($event) {
      $scope.prevent($event);
      $scope.open = !$scope.open;
    }

  });

HTML

  <input type="text" check-if-lost-focus ng-click="prevent($event)"  ng-model="name" name="name" ng-focus="focus($event)">
    <div class="btn btn-default" ng-click="toggle($event)">Toggle</div>

    <div class="dropdown" dropdown is-open="open">
      <ul class="dropdown-menu" role="menu">
          Content
      </ul>
  </div>

这篇关于下拉关闭焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！