angularjs는 텍스트 상자에서 대문자를 강제합니다.

angularjs는 텍스트 상자에서 대문자를 강제합니다.

---

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

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

과

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

두 번째는 자바 스크립트 오류를 ​​트리거합니다.

구문 오류 : 토큰 'test'가 예상치 못한 것입니다. [:] 예상

사용자가 텍스트 상자에 입력 할 때 텍스트를 대문자로 강제 적용하고 싶습니다.

어떻게 할 수 있습니까?

---

이 답변보다 우월한 아래 다른 답변을 참조하십시오.

이 답변은 여기에 대한 답변을 기반으로합니다. 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)"  />

작동합니다.

---

Bootstrap과 함께 사용 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
        }
    };

});

• "?"에주의하세요. "require : ' ? ngModel ',"... 그 후에 만 ​​내 응용 프로그램을 작동했습니다.

• "if (inputValue) {...}"정의되지 않은 오류가 발생하지 않는 경우

---

부트 스트랩 사용시 :

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

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

두 번째 접근 방식 : 기존 클래스에 적용 할 수있는 스타일 사용

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

다음은 내 stackBlitz입니다 : https://angular-nvd7v6forceuppercase.stackblitz.io

---

it is just an alternative , you can use this " text- transform : capitalize ; " in your css and the text entry will be capitalized. unless the user types it in capital letters everywhere.

it is just an alternative ^^

---

To improve the answer by Karl Zilles this is my revision of his solution. In my version the placeholder isn't changed to uppercase and works also if you want to do a regex on the string. It also take the "type" of the input string (null or undefined or empty):

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)));
        }
    }
}
});

---

Solution with cursor shift fix

.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
            }
        };
    });

---

I would just use the filter itself in the controller:

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

just keep in mind that, if you you are going to use it inside a controller, for example, you need to inject this filter:

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

참고URL : https://stackoverflow.com/questions/16388562/angularjs-force-uppercase-in-textbox