AngularJS에서 ngChange를 사용하여 사용자가 입력에 추가하는 모든 문자를 제거하는 사용자 지정 함수를 트리거합니다.
<input type="text" name="inputName" data-ng-change="numbersOnly()"/>
문제는 입력 numbersOnly()된 문자를 제거 할 수 있도록 트리거 된 입력을 대상으로해야 한다는 것입니다. 나는 Google에서 길고 열심히 보았고 이것에 대해 아무것도 찾을 수 없었습니다.
어떡해?
답변
쉬운 방법 , 사용 유형 = “숫자” 가 사용 사례에 대해 작동하는 경우 :
<input type="number" ng-model="myText" name="inputName">
또 다른 쉬운 방법 :
ng-pattern 을 사용하여 필드에서 허용되는 항목을 제한하는 정규식을 정의 할 수도 있습니다. 또한 참조 양식에 대한 “요리 책”페이지를 .
해 키시? 방법 , $ watch the ng-model in your controller :
<input type="text" ng-model="myText" name="inputName">
제어 장치:
$scope.$watch('myText', function() {
// put numbersOnly() logic here, e.g.:
if ($scope.myText ... regex to look for ... ) {
// strip out the non-numbers
}
})
가장 좋은 방법 은 지시문에 $ parser를 사용하는 것입니다. @ pkozlowski.opensource에서 제공 한 이미 좋은 답변을 반복하지 않을 것이므로 다음 링크가 있습니다. https://stackoverflow.com/a/14425022/215945
위의 모든 솔루션은 ng-model을 사용하여 찾을 this필요가 없습니다.
ng-change를 사용하면 문제가 발생합니다. AngularJS 참조 -$ scope.value 재설정은 템플릿의 값을 변경하지 않습니다 (무작위 동작).
답변
사용하여 ng-pattern텍스트 필드에 :
<input type="text" ng-model="myText" name="inputName" ng-pattern="onlyNumbers">
그런 다음 컨트롤러에 포함
$scope.onlyNumbers = /^\d+$/;
답변
제안 된 솔루션 중 어느 것도 나에게 잘 작동하지 않았고 몇 시간 후에 마침내 방법을 찾았습니다.
이것은 각도 지시문입니다.
angular.module('app').directive('restrictTo', function() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var re = RegExp(attrs.restrictTo);
var exclude = /Backspace|Enter|Tab|Delete|Del|ArrowUp|Up|ArrowDown|Down|ArrowLeft|Left|ArrowRight|Right/;
element[0].addEventListener('keydown', function(event) {
if (!exclude.test(event.key) && !re.test(event.key)) {
event.preventDefault();
}
});
}
}
});
입력은 다음과 같습니다.
<input type="number" min="0" name="inputName" ng-model="myModel" restrict-to="[0-9]">
정규식 은 값이 아니라 누른 키를 평가합니다 .
또한 type="number"값을 변경하는 것을 방지하기 때문에 입력과 완벽하게 작동 하므로 키가 표시되지 않고 모델이 엉망이되지 않습니다.
답변
다음은 $parser@Mark Rajcok이 최상의 방법으로 권장 하는 솔루션의 구현입니다 . 본질적으로 @ pkozlowski.opensource의 텍스트 답변에 대한 훌륭한 $ 파서 이지만 숫자 만 허용하도록 다시 작성되었습니다. 모든 신용은 그에게 돌아갑니다. 이것은 그 답을 읽고 자신의 답을 다시 쓰는 데 5 분을 절약하기위한 것입니다.
app.directive('numericOnly', function(){
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null;
if (transformedInput!=inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
});
그리고 다음과 같이 사용합니다.
<input type="text" name="number" ng-model="num_things" numeric-only>
흥미롭게도 공백은 영숫자로 둘러싸 지 않는 한 파서에 도달하지 않으므로 .trim()필요에 따라 수행해야합니다. 또한이 파서는에서 작동 하지 않습니다<input type="number"> . 어떤 이유로, 숫자가 아닌 사람 은 제거 될 파서에 도달하지 않지만 입력 컨트롤 자체로 만듭니다.
답변
이를 수행하는 몇 가지 방법이 있습니다.
다음을 사용할 수 있습니다 type="number".
<input type="number" />
또는 정규식을 사용하는 재사용 가능한 지시문 을 만들었습니다 .
HTML
<div ng-app="myawesomeapp">
test: <input restrict-input="^[0-9-]*$" maxlength="20" type="text" class="test" />
</div>
자바 스크립트
;(function(){
var app = angular.module('myawesomeapp',[])
.directive('restrictInput', [function(){
return {
restrict: 'A',
link: function (scope, element, attrs) {
var ele = element[0];
var regex = RegExp(attrs.restrictInput);
var value = ele.value;
ele.addEventListener('keyup',function(e){
if (regex.test(ele.value)){
value = ele.value;
}else{
ele.value = value;
}
});
}
};
}]);
}());
답변
다음은 숫자 입력 만 허용하는 꽤 좋은 솔루션입니다 input.
<input type="text" ng-model="myText" name="inputName" onkeypress='return event.charCode >= 48 && event.charCode <= 57'/>
답변
위의 모든 솔루션은 상당히 큽니다. 저는 이것에 대해 2 센트를주고 싶었습니다.
입력 한 값이 숫자인지 아닌지 확인하고 비어 있지 않은지 확인하는 것뿐입니다.
다음은 html입니다.
<input type="text" ng-keypress="CheckNumber()"/>
다음은 JS입니다.
$scope.CheckKey = function () {
if (isNaN(event.key) || event.key === ' ' || event.key === '') {
event.returnValue = '';
}
};
아주 간단합니다.
나는 이것이 Paste tho에서 작동하지 않을 것이라고 믿습니다.
붙여 넣기의 경우 onChange 이벤트를 사용하고 전체 문자열을 구문 분석해야한다고 생각합니다. 이것은 타이핑에만 해당됩니다.
붙여 넣기 업데이트 :이 JS 함수를 추가하십시오.
$scope.CheckPaste = function () {
var paste = event.clipboardData.getData('text');
if (isNaN(paste)) {
event.preventDefault();
return false;
}
};
그리고 html 입력은 트리거를 추가합니다.
<input type="text" ng-paste="CheckPaste()"/>
이 정보가 도움이되기를 바랍니다.
