如果另一个控件具有焦点，则显示输入

我在窗体中有两个输入文本框。第二个文本框默认为隐藏。如果另一个控件具有焦点，则显示输入

我需要显示，如果任一这些都为真，第二个文本框：第一个文本框具有焦点

1）
2）第二个文本框具有焦点

我尝试使用NG-焦点和ng-blur，但如果第二个文本框具有焦点并保持第二个输入状态，然后再移回第一个文本框，则会遇到问题。

2015-08-28 Dismissile

我认为以下方法可行。

angular.module("myApp", []).controller("myCtrl", function($scope) { 
 
    $scope.inputFocus = function() { 
 
    $scope.inputFocused = true; 
 
    } 
 
    $scope.inputBlur = function() { 
 
    $scope.inputFocused = false; 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<html ng-app="myApp"> 
 
<div ng-controller="myCtrl"> 
 
    <input ng-model="input1" ng-blur="inputBlur()" placeholder="input1" ng-focus="inputFocus()" /> 
 
    <input ng-model="input2" placeholder="input2" ng-show="inputFocused" ng-focus="inputFocus()" ng-blur="inputBlur()"/> 
 
    
 
</div> 
 

 
</html>

来源

2015-08-28 15:06:19 cubbuk

你是对的...这是行不通的。我使用的离子框架和东西似乎导致它不能在那里工作，但它在一个正常的角度应用程序。 – Dismissile

你的只有一个JavaScript的解决方案设置？这可以在纯CSS使用下列来完成：

input[type="text"] { 
 
    width: 150px; 
 
    padding: 3px 5px; 
 
    display: inlne-block; 
 
    vertical-align: top; 
 
} 
 
#input2 { 
 
    margin-left: 25px; 
 
    display: none; 
 
} 
 
#input1:focus + #input2, 
 
#input2:focus { 
 
    display: inline-block; 
 
} 
 
#input2:valid { 
 
    display: inline-block; 
 
}

<div> 
 
    <input type="text" id="input1" placeholder="Input 1..." value="" /> 
 
    <input type="text" id="input2" placeholder="Input 2..." value="" required /> 
 
</div>

我知道你正在使用AngularJS，但你可能并不需要的显示/隐藏效果。它可能被证明比它的价值更复杂。

来源

2015-08-28 15:22:58 War10ck

如果另一个控件具有焦点，则显示输入

回答

相关问题