如何autocapitalize在AngularJS的input字段中的第一个字符？

如何在AngularJS表单元素的input字段中自动注入第一个字符？

我已经看到了jQuery解决scheme，但是相信在AngularJS中通过使用一个指令可以完成不同的工作。

Answer 1

是的，您需要定义一个指令并定义您自己的parsing器函数：

myApp.directive('capitalizeFirst', function($parse) { return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { var capitalize = function(inputValue) { if (inputValue === undefined) { inputValue = ''; } var capitalized = inputValue.charAt(0).toUpperCase() + inputValue.substring(1); if(capitalized !== inputValue) { modelCtrl.$setViewValue(capitalized); modelCtrl.$render(); } return capitalized; } modelCtrl.$parsers.push(capitalize); capitalize($parse(attrs.ngModel)(scope)); // capitalize initial value } }; }); 

HTML：

 <input type="text" ng-model="obj.name" capitalize-first> 

小提琴

Answer 2

请记住，并非所有事情都需要一个Angular解决scheme。 jQuery人群中你看到了很多， 他们喜欢使用昂贵的jQuery函数来处理更简单或更容易处理纯JavaScript的事情。

所以，虽然你可能需要一个大写的函数，上面的答案提供了，但是使用css规则“text-transform：capitalize”会更有效率，

 <tr ng-repeat="(key, value) in item"> <td style="text-transform: capitalize">{{key}}</td> <td>{{item}}</td> </tr> 

Answer 3

您可以创build一个自定义filter“大写”，并将其应用于您想要的任何string：

  <div ng-controller="MyCtrl"> {{aString | capitalize}} ! </div> 

filter的JavaScript代码：

 var app = angular.module('myApp',[]); myApp.filter('capitalize', function() { return function(input, scope) { return input.substring(0,1).toUpperCase()+input.substring(1); } }); 

Answer 4

使用CSS：首字母的伪类。

你需要把所有内容都写成小写字母，并且只在第一个字母后面加上大写字母

 p{ text-transform: lowercase; } p:first-letter{ text-transform: uppercase; } 

这是一个例子： http : //jsfiddle.net/AlexCode/xu24h/

Answer 5

修改他的代码，以大写每个字的第一个字符。 如果你给“ 约翰 ·杜 ”，输出是“ 约翰·杜 ”

 myApp.directive('capitalizeFirst', function() { return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { var capitalize = function(inputValue) { var capitalized = inputValue.split(' ').reduce(function(prevValue, word){ return prevValue + word.substring(0, 1).toUpperCase() + word.substring(1) + ' '; }, ''); if(capitalized !== inputValue) { modelCtrl.$setViewValue(capitalized); modelCtrl.$render(); } return capitalized; } modelCtrl.$parsers.push(capitalize); capitalize(scope[attrs.ngModel]); // capitalize initial value } }; }); 

Answer 6

我宁愿filter和指令。 这应该适用于光标移动：

 app.filter('capitalizeFirst', function () { return function (input, scope) { var text = input.substring(0, 1).toUpperCase() + input.substring(1).toLowerCase(); return text; } }); app.directive('capitalizeFirst', ['$filter', function ($filter) { return { require: 'ngModel', link: function (scope, element, attrs, controller) { controller.$parsers.push(function (value) { var transformedInput = $filter('capitalizeFirst')(value); if (transformedInput !== value) { var el = element[0]; el.setSelectionRange(el.selectionStart, el.selectionEnd); controller.$setViewValue(transformedInput); controller.$render(); } return transformedInput; }); } }; }]); 

这是一个小提琴

Answer 7

为了解决游标问题（从Mark Rajcok的解决scheme中），可以在方法的开始存储元素[0] .selectionStart，然后确保将元素[0] .selectionStart和元素[0] .selectionEnd复位到存储的返回前的价值。 这应该捕捉你的select范围的angular度

Answer 8

对Mark Rajcok解决scheme的评论：当使用$ setViewValue时，您再次触发parsing器和validation器。 如果在大写函数的开始处添加console.log语句，则会看到它打印两次。

我build议下面的指令解决scheme（ngModel是可选的）：

 .directive('capitalize', function() { return { restrict: 'A', require: '?ngModel', link: function(scope, element, attrs, ngModel) { var capitalize = function (inputValue) { return (inputValue || '').toUpperCase(); } if(ngModel) { ngModel.$formatters.push(capitalize); ngModel._$setViewValue = ngModel.$setViewValue; ngModel.$setViewValue = function(val){ ngModel._$setViewValue(capitalize(val)); ngModel.$render(); }; }else { element.val(capitalize(element.val())); element.on("keypress keyup", function(){ scope.$evalAsync(function(){ element.val(capitalize(element.val())); }); }); } } }; }); 

Answer 9

这是一个大写的第一个字母的filtercodepen： http ://codepen.io/WinterJoey/pen/sfFaK

 angular.module('CustomFilter', []). filter('capitalize', function() { return function(input, all) { return (!!input) ? input.replace(/([^\W_]+[^\s-]*) */g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();}) : ''; } }); 

Answer 10

继CSS之外的答案，你总是可以使用Twitter Bootstrap ：

 <td class="text-capitalize"> 

Answer 11

build立Mark Rajcok的解决scheme; 请注意，只有当input字段处于被占用状态时，该指令才会进行评估，否则，您将收到错误消息，直到input字段具有第一个字符。 简单的修复几个条件：一个jsfiddle去： https ://jsfiddle.net/Ely_Liberov/Lze14z4g/2/

  .directive('capitalizeFirst', function(uppercaseFilter, $parse) { return { require: 'ngModel', link: function(scope, element, attrs, modelCtrl) { var capitalize = function(inputValue) { if (inputValue != null) { var capitalized = inputValue.charAt(0).toUpperCase() + inputValue.substring(1); if (capitalized !== inputValue) { modelCtrl.$setViewValue(capitalized); modelCtrl.$render(); } return capitalized; } }; var model = $parse(attrs.ngModel); modelCtrl.$parsers.push(capitalize); capitalize(model(scope)); } }; }); 

Answer 12

用css-ony回答的问题是，angular度模型没有被视图更新。 这是因为CSS只在渲染之后应用样式。

以下指令更新模型并记住游标位置

 app.module.directive('myCapitalize', [ function () { 'use strict'; return { require: 'ngModel', restrict: "A", link: function (scope, elem, attrs, modelCtrl) { /* Watch the model value using a function */ scope.$watch(function () { return modelCtrl.$modelValue; }, function (value) { /** * Skip capitalize when: * - the value is not defined. * - the value is already capitalized. */ if (!isDefined(value) || isUpperCase(value)) { return; } /* Save selection position */ var start = elem[0].selectionStart; var end = elem[0].selectionEnd; /* uppercase the value */ value = value.toUpperCase(); /* set the new value in the modelControl */ modelCtrl.$setViewValue(value); /* update the view */ modelCtrl.$render(); /* Reset the position of the cursor */ elem[0].setSelectionRange(start, end); }); /** * Check if the string is defined, not null (in case of java object usage) and has a length. * @param str {string} The string to check * @return {boolean} <code>true</code> when the string is defined */ function isDefined(str) { return angular.isDefined(str) && str !== null && str.length > 0; } /** * Check if a string is upper case * @param str {string} The string to check * @return {boolean} <code>true</code> when the string is upper case */ function isUpperCase(str) { return str === str.toUpperCase(); } } }; }]); 

Answer 13

您可以使用提供的大写filter。

http://docs.angularjs.org/api/ng.filter:uppercase

Answer 14

你可以使用纯CSS：

input { text-transform: capitalize; }