angularjs 텍스트 상자에 대문자 강제 적용

angularjs 텍스트 상자에 대문자 강제 적용

대문자 필터를 사용해 봤지만 작동하지 않습니다.두 가지 방법을 시도했습니다.

<input type="text" ng-model="test" uppercase/>

그리고.

<input type="text" ng-model="{{test | uppercase}}"/>

두 번째는 javascript 오류를 트리거합니다.

구문 오류:토큰 '테스트'가 예기치 않습니다. [:]가 필요합니다.

텍스트 상자에 있는 사용자 유형으로 텍스트를 대문자로 표시해야 합니다.

내가 어떻게 그럴 수 있을까?

이것보다 우월한 다른 답변을 참조해 주세요.

이 답변은 다음 답변에 기초하고 있습니다.AngularJS에서 입력 필드의 첫 번째 문자를 자동 자본화하는 방법은 무엇입니까?

파서 기능은 다음과 같습니다.

angular
  .module('myApp', [])
  .directive('capitalize', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
          if (inputValue == undefined) inputValue = '';
          var capitalized = inputValue.toUpperCase();
          if (capitalized !== inputValue) {
            // see where the cursor is before the update so that we can set it back
            var selection = element[0].selectionStart;
            modelCtrl.$setViewValue(capitalized);
            modelCtrl.$render();
            // set back the cursor after rendering
            element[0].selectionStart = selection;
            element[0].selectionEnd = selection;
          }
          return capitalized;
        }
        modelCtrl.$parsers.push(capitalize);
        capitalize(scope[attrs.ngModel]); // capitalize initial value
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <input type="text" ng-model="name" capitalize>
</div>

기존의 문자열의 선두에 소문자를 입력하려고 하면, 받아들여진 회답에 의해서 문제가 발생합니다.키를 누를 때마다 커서가 문자열 끝으로 이동합니다.다음은 모든 문제를 해결하는 간단한 솔루션입니다.

directive('uppercased', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function(input) {
                return input ? input.toUpperCase() : "";
            });
            element.css("text-transform","uppercase");
        }
    };
})

여기 바이올린이 있습니다.http://jsfiddle.net/36qp9ekL/1710/

클라이언트측에서는 스트링을 대문자로 표시하고(변환이 아닌) 서버측에서는 대문자로 변환하는 것입니다(클라이언트측에서는 항상 사용자가 조작할 수 있습니다).그래서:

1) html:

<input id="test" type="text" ng-model="test">

대문자 변환은 없습니다.

2) css:

#test {text-transform: uppercase;}

데이터는 대문자로 표시되지만 사용자가 소문자로 입력한 경우에는 여전히 소문자로 표시됩니다.3) 데이터베이스에 삽입할 때 서버 측에서 문자열을 대문자로 변환합니다.

=====는 다음과 같은 기능을 사용해 볼 수 있습니다.

<input type="text" ng-model="test" ng-change="test=test.toUpperCase();">
<input type="text" ng-model="test" ng-blur="test=test.toUpperCase();">

하지만 당신의 경우에는 ng-change나 ng-blur 방식이 필요하지 않다고 생각합니다.

ng-model은 할당 가능해야 하므로 필터는 만들 수 없습니다.회피책은 파서 또는 단순히ng-change 중 하나입니다.

<input ng-model="some" ng-change="some = (some | uppercase)"  />

이거면 될 거야.

부트스트랩과 , '부트스트랩'을 추가하기만 하면 .text-uppercase클래스 속성을 입력합니다.

one of the simple way is,
<input type="text" ng-model="test" ng-change="upper(test)/>

just do below 2 line code in your js file,
$scope.upper = function(test){
$scope.test = test.toUpperCase();
}

여기 내 바이올린 http://jsfiddle.net/mzmmohideen/36qp9ekL/299/이 있다.

이것은 전혀 작동하지 않을 것이다.

ng-model스코프에서 모델에 바인딩할 필드/속성을 지정합니다.ㅇㅇㅇㅇ.ng-model는 식을 값으로 받아들이지 않습니다.angular.js에서의 표현은 와 사이의 값입니다.

uppercase필터는 출력 및 식을 사용할 수 있는 모든 곳에서 사용할 수 있습니다.

할 수 CSS의할 수 .text-transform최소한 모든 항목을 대문자로 표시합니다.

텍스트 필드의 값을 대문자로 지정하려면 일부 사용자 정의 JavaScript를 사용하여 이 작업을 수행할 수 있습니다.

컨트롤러 내:

$scope.$watch('test', function(newValue, oldValue) {
  $scope.$apply(function() {
    $scope.test = newValue.toUpperCase();
  }
});

모듈에 'ngSanitize'를 포함시키는 것을 잊지 마십시오.

app.directive('capitalize', function() {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel',
        link : function(scope, element, attrs, modelCtrl) {
            var capitalize = function(inputValue) {
                if(inputValue) {
                    var capitalized = inputValue.toUpperCase();
                    if (capitalized !== inputValue) {
                        modelCtrl.$setViewValue(capitalized);
                        modelCtrl.$render();
                    }
                    return capitalized;
                }
            };
            modelCtrl.$parsers.push(capitalize);
            capitalize(scope[attrs.ngModel]); // capitalize initial value
        }
    };

});

• '요건: '?ngModel'의 '?'에 주목해 주세요.그때서야 어플리케이션이 동작했습니다.

• "만약 (inputValue) {...}" 정의되지 않은 오류는 발생하지 않습니다.

부트스트랩을 사용하는 경우:

첫 번째 접근법: 클래스 텍스트 대문자 사용

<input  type="text" class="text-uppercase" >

두 번째 접근법: 기존 클래스에 적용할 수 있는 스타일을 사용합니다.

<input  type="text" class="form-control" style="text-transform: uppercase;">

여기 스택 Blizz: 。

이것은 대체 수단일 뿐입니다.이 "text-transform : capitalize"를 css에 사용하면 텍스트엔트리가 대문자로 표시됩니다.사용자가 대문자로 입력하지 않는 한 말이죠.

그냥 대안일 뿐이야 ^^

Karl Zilles의 답변을 개선하기 위해 이것은 그의 해결책에 대한 나의 수정이다.이 버전에서는 자리 표시자가 대문자로 변경되지 않으며 문자열에 regex를 수행하려는 경우에도 사용할 수 있습니다.또한 입력 문자열의 "type"(null, 정의되지 않음 또는 비어 있음)도 사용합니다.

var REGEX = /^[a-z]+$/i;
myApp.directive('cf', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.cf = function(modelValue, viewValue) {
            ctrl.$parsers.push(function(input) {
                elm.css("text-transform", (input) ? "uppercase" : "");
                return input ? input.toUpperCase() : input;
            });
            return (!(ctrl.$isEmpty(modelValue)) && (REGEX.test(viewValue)));
        }
    }
}
});

커서 이동 수정이 있는 솔루션

.directive('titleCase', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, modelCtrl) {
                var titleCase = function (input) {
                    let first = element[0].selectionStart;
                    let last = element[0].selectionEnd;
                    input = input || '';
                    let retInput = input.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
                    if (input !== retInput) {
                        modelCtrl.$setViewValue(retInput);
                        attrs.ngModel = retInput;
                        modelCtrl.$render();
                        if (!scope.$$phase) {
                            scope.$apply(); // launch digest;
                        }
                    }
                    element[0].selectionStart = first;
                    element[0].selectionEnd = last;
                    return retInput;
                };
                modelCtrl.$parsers.push(titleCase);
                titleCase(scope[attrs.ngModel]);  // Title case  initial value
            }
        };
    });

모델 및 값을 변경하려면 다음을 사용합니다.

angular.module('MyApp').directive('uppercased', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.bind("blur change input", function () {
                ngModel.$setViewValue($(this).val().toUpperCase());
                $(this).val($(this).val().toUpperCase());
            });
            element.css("text-transform","uppercase");
        }
    };
});

그런 다음 html 입력 텍스트에 대문자를 추가합니다.

<input  type="text" uppercased />

컨트롤러에서 필터 자체를 사용합니다.

 $filter('uppercase')(this.yourProperty)

예를 들어 컨트롤러 내에서 사용하는 경우 다음 필터를 삽입해야 합니다.

app.controller('FooController', ['$filter', function($filter) ...

언급URL : https://stackoverflow.com/questions/16388562/angularjs-force-uppercase-in-textbox