[英]Show span on input focus
我有兩個與<span>
綁定的文本字段,用於計算字符的總長度。
我已應用ng-if
條件。
但是我的情況是,僅當相應的textarea
被focused
時,它才應該在字符左側顯示文本。
<textarea ng-model="goal.goal_name"
required ng-focus="openFullcreateGoalController()" maxlength="90" placeholder="Write your title here"></textarea>
<span ng-if="goal.goal_name && !goal.goal_description">{{90 - goal.goal_name.length}}characters left</span>
<textarea msd-elastic ng-model="goal.goal_description" required placeholder="Add description" maxlength="140"></textarea>
<span ng-if="goal.goal_description">{{90 - goal.goal_description.length}}characters left</span>
我的代碼僅在另一個為空時顯示它。
您可以使用css :focus規則
var app = angular.module('my-app', [], function() {}) app.controller('AppController', function($scope) { $scope.goal = { goal_name: 'goal_name', goal_description: 'goal_description' }; })
textarea.charleft + span { display: none; } textarea.charleft:focus + span { display: inline; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="my-app"> <div ng-controller="AppController"> <textarea ng-model="goal.goal_name" class="charleft" required maxlength="90" placeholder="Write your title here"></textarea> <span ng-if="goal.goal_name">{{90 - goal.goal_name.length}}characters left</span> <textarea msd-elastic class="charleft" ng-model="goal.goal_description" required placeholder="Add description" maxlength="140"></textarea> <span ng-if="goal.goal_description">{{90 - goal.goal_description.length}}characters left</span> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.