下拉关闭焦点 [英] dropdown closes on focus
本文介绍了下拉关闭焦点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在输入字段的焦点上触发下拉菜单.但是每次我集中注意力时它都会打开并突然关闭.使用按钮切换一切正常.这是示例:http://codepen.io/piernik/pen/ByKRwE
这里是 HTML
<input type="text" class="form-control" ng-focus="show($event)"><div class="input-group-addon"><i class="fa fa-fw fa-calendar"></i></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">内容
和JS:
$scope.model = {打开:假};$scope.toggleDropdown = 函数($event){$event.preventDefault();$event.stopPropagation();$scope.model.open = !$scope.model.open;};$scope.show = 函数($event){$event.preventDefault();$event.stopPropagation();$scope.model.open = true;};$scope.hide = 函数($event){$event.preventDefault();$event.stopPropagation();$scope.model.open = false;};
解决方案
发生这种情况是因为单击事件也在您的输入中触发,阻止了其默认行为.
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
<div class="btn btn-default" ng-click="toggle($event)">Toggle</div><div class="dropdown" dropdown is-open="open"><ul class="dropdown-menu" role="menu">内容
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.
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屋!
查看全文