Question

我在表单中有两个输入文本框。默认情况下隐藏第二个文本框。

如果其中任何一个为真，我需要显示第二个文本框：

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

我尝试过使用ng-focus和ng-blur但是我在第二个输入显示第二个文本框是否有焦点然后移回第一个输入时遇到了问题。

Answer 1

我认为以下内容可行。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您是否开始只使用JavaScript解决方案？这可以使用以下内容在纯CSS中完成：

＆＃13;

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;  
}

＆＃13;

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

＆＃13;

我了解您正在使用AngularJS，但您可能不需要显示/隐藏效果。事实证明它可能比它的价值更复杂。

Answer 3

我们可以使用下面的简单代码。我们使用ng-blur和ng-focus指令更改变量$scope.showInput2的值的位置。可以使用inputB指令管理ng-show的显示。

angular.module("testApp", []).controller("testCtrl", function($scope) {
  $scope.showInput2 = false;
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="testApp">
<div ng-controller="testCtrl">
  <input ng-model="inputA" ng-blur="showInput2 = false" ng-focus="showInput2 = true" placeholder="input A"/>
  <input ng-model="inputB" placeholder="input B" ng-show="showInput2"/>
  
</div>

</html>

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

3 个答案: