我有两个与 <span>
绑定(bind)的文本字段计算一个字符的总长度。
我已经申请了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>
关于javascript - 在输入焦点上显示跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35938823/