如果另一個控件具有焦點，則顯示輸入

我在窗體中有兩個輸入文本框。第二個文本框默認爲隱藏。如果另一個控件具有焦點，則顯示輸入

我需要顯示，如果任一這些都爲真，第二個文本框：第一個文本框具有焦點

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

如果另一個控件具有焦點，則顯示輸入

回答

相關問題