반응형
angularjs 텍스트 영역 문자 카운터
안녕하세요, 텍스트 영역용 문자 변환 카운터가 있습니다.문제는 공백이나 줄 바꿈은 세지 않는다는 것입니다.어떻게 하면 그렇게 할 수 있을까요?
<div class="controls">
<textarea rows="4" cols="50" maxlength="1500" data-ng-minLength="1" data-ng
model="createprofilefields.description" required highlight-on-
error></textarea>
<br />
<!--counter-->
<span class="form-help">{{1500-createprofilefields.description.length}}
Characters</span>
</div>
각이 져서 그래요.JS는 자동으로 모형을 트리밍합니다.
angularJS 1.1.1 이후를 사용하는 경우,ng-trim="false"로.textarea.
작업 예: http://jsfiddle.net/9DbYY/
Angular의 경우,textarea라고 하는 옵션의 인수가 있습니다.ngTrim. [ Angular text area ]페이지에 따르면:
false로 설정하면 Angular는 입력을 자동으로 트리밍하지 않습니다.(디폴트: true)
사용방법:
<textarea
ng-model="string"
[ng-trim="boolean"]>
...
</textarea>
다음 코드는 사용 방법을 보여 줍니다.ngTrimAngular가 입력을 트리밍하지 않도록 하려면:
<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
<meta charset="UTF-8">
<title>Character count</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body>
<textarea ng-trim="false" ng-model="countmodel"></textarea>
<p>{{15 - countmodel.length}} left</p>
</body>
</html>
주의:input[text]에는 같은 옵션이 있습니다.ngTrim인수(각 입력 페이지).
charCount라는 이름의 디렉티브를 만듭니다.
.directive('charCount', ['$log', '$timeout', function($log, $timeout){
return {
restrict: 'A',
compile: function compile()
{
return {
post: function postLink(scope, iElement, iAttrs)
{
iElement.bind('keydown', function()
{
scope.$apply(function()
{
scope.numberOfCharacters = iElement.val().length;
});
});
iElement.bind('paste', function()
{
$timeout(function ()
{
scope.$apply(function()
{
scope.numberOfCharacters = iElement.val().length;
});
}, 200);
});
}
}
}
}
}])
HTML에서 지시어 char-count를 호출하여 변수 number Of Characters에 액세스합니다.
<textarea
ng-model="text"
ng-required="true"
char-count></textarea>
Number of Characters: {{ numberOfCharacters }}<br>
call ng-change로 기능을 사용할 수 있습니다="
<div class="controls">
<textarea rows="4" cols="50" maxlength="1500"
data-ng-minLength="1" data-ng
model="createprofilefields.description"
ng-change="countLength(createprofilefields.description.length)"
required highlight-on-error>
</textarea>
<br />
<!--counter-->
<span class="form-help">{{1500-chrLength}}
Characters</span>
</div>
controller.controller.controller에 있습니다.
$scope.countLength = function(val){
$scope.chrLength = val;
}
언급URL : https://stackoverflow.com/questions/20603107/angularjs-text-area-character-counter
반응형
'your programing' 카테고리의 다른 글
| CMS를 직접 작성해야 합니까? (0) | 2023.03.13 |
|---|---|
| 스프링 부트 오류:java.lang.ArrayStoreException:sun.reflect.annotation.존재하지 않는 유형예외 프록시 (0) | 2023.03.13 |
| WooCommerce 변수 제품의 리셋 변동 버튼을 제거합니다. (0) | 2023.03.13 |
| Transofrm sql 쿼리를 사용하여 wordpress 쿼리를 새 wp_query로 실행합니다. (0) | 2023.03.13 |
| 이것이 redux를 사용하여 항목을 삭제하는 올바른 방법입니까? (0) | 2023.03.13 |