Как автокапитализировать поле ввода в угловом js?

Question

У меня есть поле ввода.

Мне нужно автокапитализировать эту коробку.

Есть ли какие-либо свойства имеющиеся для этого или мне нужно код на контроллере

я также необходим, что этот эффект в угловых применен моделях

Answer 1

Да, у нас есть директива для этого :) Исходный код (написанный в машинописи) на GitHub https://github.com/ST-Software/STAngular/blob/master/src/directives/SgUpperCase.ts

// Исправлена ​​ошибка с курсором прыгая в конце

someModule.directive("sgUpperCase", [function() { 
    function getCaretPosition(inputField) { 
     // Initialize 
     var position = 0; 
     // IE Support 
     if (document.selection) { 
      inputField.focus(); 
      // To get cursor position, get empty selection range 
      var emptySelection = document.selection.createRange(); 
      // Move selection start to 0 position 
      emptySelection.moveStart('character', -inputField.value.length); 
      // The caret position is selection length 
      position = emptySelection.text.length; 
     } 
     else if (inputField.selectionStart || inputField.selectionStart == 0) { 
      position = inputField.selectionStart; 
     } 
     return position; 
    } 
    function setCaretPosition(inputElement, position) { 
     if (inputElement.createTextRange) { 
      var range = inputElement.createTextRange(); 
      range.move('character', position); 
      range.select(); 
     } 
     else { 
      if (inputElement.selectionStart) { 
       inputElement.focus(); 
       inputElement.setSelectionRange(position, position); 
      } 
      else { 
       inputElement.focus(); 
      } 
     } 
    } 
    return { 
     require: "^ngModel", 
     restrict: "A", 
     link: function (scope, elm, attrs, ctrl) { 
      var toUpperCase = function (inputValue) { 
       if (!inputValue) 
        return inputValue; 
       var modified = inputValue.toUpperCase(); 
       if (modified !== inputValue) { 
        var position = getCaretPosition(elm[0]); 
        ctrl.$setViewValue(modified); 
        ctrl.$render(); 
        setCaretPosition(elm[0], position); 
       } 
       return modified; 
      }; 
      ctrl.$parsers.push(toUpperCase); 
      toUpperCase(scope[attrs.ngModel]); //Transform initial value 
     } 
    }; 
}]); 

Answer 2

Добавьте это в свой controller. $watch будет выслушать любые изменения, сделанные на bic, и обновит значение.

$scope.$watch('bic', function() { 
    if ($scope.bic) { 
     $scope.bic = $scope.bic.toUpperCase(); 
    } 
}); 

Answer 3

Вы можете на самом деле сделать это с помощью CSS.

input{ 
 
    text-transform: uppercase; 
 
}

<input type="text" value="This text is auto capitalized" />

Answer 4

Вам не нужно Jquery/Javascript для этого. Попробуйте это:

<input type="text" ng-model="abc" id="myid" class="span6" value="" name=""> 

В CSS

input { 
    text-transform: uppercase; 
} 

JSFIDDLE DEMO

Answer 5

Добавить класс в тег ввода. .capitalize { текст-преобразования: заглавные буквы» }

i.e <input type="text" ng-model="bic" class="capitalize" id="txtbic" maxlength="11" class="span6" value="" name=""> 

Answer 6

Вы можете использовать угловой фильтр uppercase на изменение этого поля с помощью ng-change, если вы хотите, чтобы сделать его капитал на нагрузку, то вы должны, чтобы то же самое в ng-init слишком

Markup

<input type="text" ng-model="sample" ng-change="sample=(sample|uppercase)"/> 

Answer 7

Заканчивать этого s рабочий .. он также обновляет модель ...

<div ng-app="HelloApp"> 
    <input type="text" ng-model="name" uppercased/> {{name}}   
</div> 

angular.module('components', []) 
    .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"); 
     } 
    }; 
}); 

angular.module('HelloApp', ['components']) 

Рабочая модель here