ฉันใช้ ngChange ใน AngularJS เพื่อเรียกใช้ฟังก์ชันที่กำหนดเองซึ่งจะลบตัวอักษรใด ๆ ที่ผู้ใช้เพิ่มลงในอินพุต
<input type="text" name="inputName" data-ng-change="numbersOnly()"/>
ปัญหาคือฉันต้องกำหนดเป้าหมายอินพุตที่ทริกเกอร์numbersOnly()เพื่อที่ฉันจะได้ลบตัวอักษรที่ป้อน ฉันดู Google มานานและยากมากและไม่พบอะไรเกี่ยวกับเรื่องนี้
ฉันจะทำอะไรได้บ้าง?
คำตอบ:
วิธีง่ายๆใช้type = "number"หากใช้ได้กับกรณีการใช้งานของคุณ:
<input type="number" ng-model="myText" name="inputName">
อีกวิธีง่ายๆ: ng-patternสามารถใช้เพื่อกำหนด regex ที่จะ จำกัด สิ่งที่อนุญาตในฟิลด์ ดูเพิ่มเติม"ตำรา" หน้าเกี่ยวกับรูปแบบ
แฮก? วิธี $ ดู ng-model ในคอนโทรลเลอร์ของคุณ:
<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 ไม่เปลี่ยนค่าในเทมเพลต (พฤติกรรมสุ่ม)
type=numberจะแสดงสปินเนอร์โดยอัตโนมัติซึ่งอาจไม่เป็นที่ต้องการ คุณสามารถซ่อนสปินเนอร์ผ่าน css ได้ แต่ก็อาจใช้ไม่ได้กับทุกเบราว์เซอร์
ใช้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"เนื่องจากป้องกันไม่ให้เปลี่ยนค่าดังนั้นคีย์จะไม่ปรากฏขึ้นและจะไม่ยุ่งกับโมเดล
restrict-to="[0-9\-]"
นี่คือการใช้งาน$parserโซลูชันที่ @Mark Rajcok แนะนำว่าเป็นวิธีที่ดีที่สุด โดยพื้นฐานแล้วมันเป็น $ parser ที่ยอดเยี่ยมของ @ 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()ตามความจำเป็น นอกจากนี้ parser นี้ไม่ไม่<input type="number">ทำงานใน ด้วยเหตุผลบางประการ non-numerics จะไม่นำไปใช้กับ parser ที่ซึ่งจะถูกลบออกไป แต่จะทำให้เป็นตัวควบคุมอินพุตเอง
var transformedInput = inputValue ? inputValue.replace(/[^\d.-]/g,'') : null;
ng-trimเพื่อfalseให้แน่ใจว่าช่องว่างเข้าถึงตัววิเคราะห์ของคุณ
modelCtrl.$commitViewValue();ระหว่าง $ setViewValue (clean) และ $ render ();
มีสองสามวิธีในการดำเนินการนี้
คุณสามารถใช้type="number":
<input type="number" />
อีกทางเลือกหนึ่ง - ฉันสร้างคำสั่งที่ใช้ซ้ำได้สำหรับสิ่งนี้ซึ่งใช้นิพจน์ทั่วไป
Html
<div ng-app="myawesomeapp">
test: <input restrict-input="^[0-9-]*$" maxlength="20" type="text" class="test" />
</div>
Javascript
;(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 ดังนั้นจึงเป็นที่รู้จัก
สำหรับ Paste ฉันคิดว่าคุณจะต้องใช้เหตุการณ์ 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()"/>
ฉันหวังว่านี่จะช่วย o /
นี่คือPlunker ที่จัดการสถานการณ์ใด ๆ ข้างต้นเรื่องที่ไม่สามารถจัดการได้
โดยใช้ $ formatters และ $ parsers pipeline และหลีกเลี่ยง type = "number"
และนี่คือคำอธิบายของปัญหา / แนวทางแก้ไข (มีอยู่ใน Plunker):
/*
*
* Limit input text for floating numbers.
* It does not display characters and can limit the Float value to X numbers of integers and X numbers of decimals.
* min and max attributes can be added. They can be Integers as well as Floating values.
*
* value needed | directive
* ------------------------------------
* 55 | max-integer="2"
* 55.55 | max-integer="4" decimal="2" (decimals are substracted from total length. Same logic as database NUMBER type)
*
*
* Input type="number" (HTML5)
*
* Browser compatibility for input type="number" :
* Chrome : - if first letter is a String : allows everything
* - if first letter is a Integer : allows [0-9] and "." and "e" (exponential)
* Firefox : allows everything
* Internet Explorer : allows everything
*
* Why you should not use input type="number" :
* When using input type="number" the $parser pipeline of ngModel controller won't be able to access NaN values.
* For example : viewValue = '1e' -> $parsers parameter value = "".
* This is because undefined values are not allowes by default (which can be changed, but better not do it)
* This makes it impossible to modify the view and model value; to get the view value, pop last character, apply to the view and return to the model.
*
* About the ngModel controller pipelines :
* view value -> $parsers -> model value
* model value -> $formatters -> view value
*
* About the $parsers pipeline :
* It is an array of functions executed in ascending order.
* When used with input type="number" :
* This array has 2 default functions, one of them transforms the datatype of the value from String to Number.
* To be able to change the value easier (substring), it is better to have access to a String rather than a Number.
* To access a String, the custom function added to the $parsers pipeline should be unshifted rather than pushed.
* Unshift gives the closest access to the view.
*
* About the $formatters pipeline :
* It is executed in descending order
* When used with input type="number"
* Default function transforms the value datatype from Number to String.
* To access a String, push to this pipeline. (push brings the function closest to the view value)
*
* The flow :
* When changing ngModel where the directive stands : (In this case only the view has to be changed. $parsers returns the changed model)
* -When the value do not has to be modified :
* $parsers -> $render();
* -When the value has to be modified :
* $parsers(view value) --(does view needs to be changed?) -> $render();
* | |
* | $setViewValue(changedViewValue)
* | |
* --<-------<---------<--------<------
*
* When changing ngModel where the directive does not stand :
* - When the value does not has to be modified :
* -$formatters(model value)-->-- view value
* -When the value has to be changed
* -$formatters(model vale)-->--(does the value has to be modified) -- (when loop $parsers loop is finished, return modified value)-->view value
* |
* $setViewValue(notChangedValue) giving back the non changed value allows the $parsers handle the 'bad' value
* | and avoids it to think the value did not changed
* Changed the model <----(the above $parsers loop occurs)
*
*/
<input type="text" name="profileChildCount" id="profileChildCount" ng-model="profile.ChildCount" numeric-only maxlength="1" />
คุณสามารถใช้แอตทริบิวต์ที่เป็นตัวเลขเท่านั้น
ทศนิยม
directive('decimal', function() {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, element, attr, ctrl) {
function inputValue(val) {
if (val) {
var digits = val.replace(/[^0-9.]/g, '');
if (digits.split('.').length > 2) {
digits = digits.substring(0, digits.length - 1);
}
if (digits !== val) {
ctrl.$setViewValue(digits);
ctrl.$render();
}
return parseFloat(digits);
}
return "";
}
ctrl.$parsers.push(inputValue);
}
};
});
หลัก
directive('entero', function() {
return {
require: 'ngModel',
restrict: 'A',
link: function(scope, element, attr, ctrl) {
function inputValue(val) {
if (val) {
var value = val + ''; //convert to string
var digits = value.replace(/[^0-9]/g, '');
if (digits !== value) {
ctrl.$setViewValue(digits);
ctrl.$render();
}
return parseInt(digits);
}
return "";
}
ctrl.$parsers.push(inputValue);
}
};
});
คุณอาจต้องการลบ 0 ที่จุดเริ่มต้นของอินพุต ... ฉันแค่เพิ่มบล็อก if ในคำตอบของ Mordred ด้านบนเพราะฉันยังไม่สามารถแสดงความคิดเห็นได้ ...
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();
}
//clear beginning 0
if(transformedInput == 0){
modelCtrl.$setViewValue(null);
modelCtrl.$render();
}
return transformedInput;
});
}
};
})
ลองสิ่งนี้
<input ng-keypress="validation($event)">
function validation(event) {
var theEvent = event || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
var regex = /[0-9]|\./;
if (!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
}
วิธีแก้ปัญหา: ฉันสร้างคำสั่งสำหรับอินพุตตัวเลขข้อความหรือใด ๆ ทั้งหมดในแอปเพื่อให้คุณสามารถป้อนค่าและเปลี่ยนเหตุการณ์ได้ สร้างเชิงมุม 6
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
// tslint:disable-next-line:directive-selector
selector: 'input[inputType]'
})
export class InputTypeDirective {
constructor(private _el: ElementRef) {}
@Input() inputType: string;
// tipos: number, letter, cuit, tel
@HostListener('input', ['$event']) onInputChange(event) {
if (!event.data) {
return;
}
switch (this.inputType) {
case 'number': {
const initalValue = this._el.nativeElement.value;
this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
if (initalValue !== this._el.nativeElement.value) {
event.stopPropagation();
}
break;
}
case 'text': {
const result = event.data.match(/[^a-zA-Z Ññ]*/g);
if (result[0] !== '') {
const initalValue = this._el.nativeElement.value;
this._el.nativeElement.value = initalValue.replace(
/[^a-zA-Z Ññ]*/g,
''
);
event.stopPropagation();
}
break;
}
case 'tel':
case 'cuit': {
const initalValue = this._el.nativeElement.value;
this._el.nativeElement.value = initalValue.replace(/[^0-9-]*/g, '');
if (initalValue !== this._el.nativeElement.value) {
event.stopPropagation();
}
}
}
}
}
HTML
<input matInput inputType="number" [formControlName]="field.name" [maxlength]="field.length" [placeholder]="field.label | translate" type="text" class="filter-input">
ฉันลงเอยด้วยการสร้างคำสั่งแก้ไขของโค้ดด้านบนเพื่อยอมรับอินพุตและเปลี่ยนรูปแบบได้ทันที ...
.directive('numericOnly', function($filter) {
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
element.bind('keyup', function (inputValue, e) {
var strinput = modelCtrl.$$rawModelValue;
//filter user input
var transformedInput = strinput ? strinput.replace(/[^,\d.-]/g,'') : null;
//remove trailing 0
if(transformedInput.charAt(0) <= '0'){
transformedInput = null;
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}else{
var decimalSplit = transformedInput.split(".")
var intPart = decimalSplit[0];
var decPart = decimalSplit[1];
//remove previously formated number
intPart = intPart.replace(/,/g, "");
//split whole number into array of 3 digits
if(intPart.length > 3){
var intDiv = Math.floor(intPart.length / 3);
var strfraction = [];
var i = intDiv,
j = 3;
while(intDiv > 0){
strfraction[intDiv] = intPart.slice(intPart.length-j,intPart.length - (j - 3));
j=j+3;
intDiv--;
}
var k = j-3;
if((intPart.length-k) > 0){
strfraction[0] = intPart.slice(0,intPart.length-k);
}
}
//join arrays
if(strfraction == undefined){ return;}
var currencyformat = strfraction.join(',');
//check for leading comma
if(currencyformat.charAt(0)==','){
currencyformat = currencyformat.slice(1);
}
if(decPart == undefined){
modelCtrl.$setViewValue(currencyformat);
modelCtrl.$render();
return;
}else{
currencyformat = currencyformat + "." + decPart.slice(0,2);
modelCtrl.$setViewValue(currencyformat);
modelCtrl.$render();
}
}
});
}
};
})
<input type="text" ng-model="employee.age" valid-input input-pattern="[^0-9]+" placeholder="Enter an age" />
<script>
var app = angular.module('app', []);
app.controller('dataCtrl', function($scope) {
});
app.directive('validInput', function() {
return {
require: '?ngModel',
scope: {
"inputPattern": '@'
},
link: function(scope, element, attrs, ngModelCtrl) {
var regexp = null;
if (scope.inputPattern !== undefined) {
regexp = new RegExp(scope.inputPattern, "g");
}
if(!ngModelCtrl) {
return;
}
ngModelCtrl.$parsers.push(function(val) {
if (regexp) {
var clean = val.replace(regexp, '');
if (val !== clean) {
ngModelCtrl.$setViewValue(clean);
ngModelCtrl.$render();
}
return clean;
}
else {
return val;
}
});
element.bind('keypress', function(event) {
if(event.keyCode === 32) {
event.preventDefault();
}
});
}
}}); </script>
HTML พื้นฐาน
<input type="number" />
Bootstrap พื้นฐาน
<input class="form-control" type="number" value="42" id="my-id">
<input class="form-control" type="number" >