AngularJS에서 입력 필드의 첫 번째 문자를 자동 자본화하는 방법은 무엇입니까?
Angular 내부 입력 필드의 첫 번째 문자를 자동 자본화하는 방법JS 폼 요소?
jQuery 솔루션은 이미 봤지만 Angular에서는 다르게 해야 합니다.지시어를 사용하여 JS를 만듭니다.
네, 디렉티브를 정의하고 자체 파서 함수를 정의해야 합니다.
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>
모든 것이 Angular 솔루션을 필요로 하는 것은 아니라는 점을 기억하시기 바랍니다.이것은 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>
사용자 정의 필터 '대문자화'를 생성하여 원하는 문자열에 적용할 수 있습니다.
<div ng-controller="MyCtrl">
{{aString | capitalize}} !
</div>
필터의 JavaScript 코드:
var app = angular.module('myApp',[]);
myApp.filter('capitalize', function() {
return function(input, scope) {
return input.substring(0,1).toUpperCase()+input.substring(1);
}
});
CSS: first-letter 유사 클래스를 사용합니다.
모두 소문자로 입력하고 대문자를 첫 글자에만 적용해야 합니다.
p{
text-transform: lowercase;
}
p:first-letter{
text-transform: uppercase;
}
다음은 예를 제시하겠습니다.http://jsfiddle.net/AlexCode/xu24h/
모든 단어의 첫 글자를 대문자로 쓰도록 코드를 수정했어'john doe'를 지정하면 출력은 'john doe'입니다.
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
}
};
});
저는 필터와 지시가 더 좋습니다.이 조작은 커서 이동 시 동작합니다.
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;
});
}
};
}]);
여기 바이올린이 있습니다.
커서 문제(Mark Rajcok의 솔루션 위치)를 수정하려면 요소[0]를 저장할 수 있습니다.selection 메서드의 선두에서 시작하여 요소[0]를 리셋합니다.selection Start 및 요소 [0].selection 반환 전에 저장된 값으로 끝납니다.이렇게 하면 선택 범위가 각도로 캡처됩니다.
지시문 생성:
ng g directive capitalizeFirst
파일 capitalize-first.directive.ts 업데이트:
import {Directive, ElementRef, HostListener} from '@angular/core';
@Directive({
selector: '[appCapitalizeFirst]'
})
export class CapitalizeFirstDirective {
constructor(private ref: ElementRef) {
}
@HostListener('input', ['$event'])
onInput(event: any): void {
if (event.target.value.length === 1) {
const inputValue = event.target.value;
this.ref.nativeElement.value = inputValue.charAt(0).toUpperCase() + inputValue.substring(1);
}
}
}
사용방법:
<input appCapitalizeFirst>
이 코드는 Angular 11+와 호환됩니다.
Mark Rajcok 솔루션에 대한 코멘트: $setViewValue를 사용하면 파서와 검증자가 다시 트리거됩니다.console.log 문을 대문자화 함수의 선두에 추가하면 두 번 인쇄됩니다.
다음과 같은 다이렉티브솔루션을 제안합니다(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()));
});
});
}
}
};
});
여기 첫 글자를 대문자로 한 필터 코드펜이 있습니다.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();}) : '';
}
});
CSS만의 응답에 덧붙여, Twitter Bootstrap은 항상 사용할 수 있습니다.
<td class="text-capitalize">
Mark Rajcok의 솔루션을 기반으로 한다.명령어는 입력 필드가 활성화되어 있을 때만 평가하는 것이 중요합니다.그렇지 않으면 입력 필드에 첫 번째 문자가 표시될 때까지 오류 메시지가 표시됩니다.몇 가지 조건만으로 간단하게 수정 가능:여기에 맞는 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));
}
};
});
css-ony 답변의 문제는 각도 모델이 뷰로 업데이트되지 않는다는 것입니다.이는 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();
}
}
};
}]);
제공된 대문자의 필터를 사용할 수 있습니다.
http://docs.angularjs.org/api/ng.filter:uppercase
순수 css를 사용할 수 있습니다.
input { text-transform: capitalize; }
언급URL : https://stackoverflow.com/questions/15242592/how-to-autocapitalize-the-first-character-in-an-input-field-in-angularjs
'source' 카테고리의 다른 글
| 다른 테이블스페이스에서 오라클 덤프를 가져오는 방법 (0) | 2023.03.07 |
|---|---|
| Oracle varchar 값에서 문자의 발생 횟수를 계산하는 방법은 무엇입니까? (0) | 2023.03.07 |
| Oracle 11G에 SELECT 문 삽입 (0) | 2023.03.07 |
| gson: null을 빈 문자열로 취급합니다. (0) | 2023.03.07 |
| javascript에서 fetch()를 사용하여 JSON 파일을 읽는 방법은 무엇입니까? (0) | 2023.03.07 |