显示输入焦点的跨度

Question

我有两个与<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>

我的代码只显示另一个是空的。

Answer 1

您可以使用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>