AngularJS 숫자 입력 형식 보기
https://stackoverflow.com//questions/24001895
-
20-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
사용자가 큰 숫자를 입력할 때 천 단위 구분 기호 점을 표시하기 위해 서식이 지정된 숫자 입력을 사용하고 싶습니다.내가 사용한 지시문 코드는 다음과 같습니다. http://jsfiddle.net/LCZfd/3/
내가 사용할 때 input type="text" 작동하지만 사용하고 싶을 때 input type="number" 사용자가 큰 숫자를 입력할 때 무언가에 의해 이상하게 청소됩니다.
문제가 무엇입니까? input[number]?
해결책
댓글에 적힌 대로, input type="number" 숫자, 소수 구분 기호(보통 , 또는 . 지역에 따라 다름) 및 - 또는 e.당신은 아직도 입력하다 원하는 것은 무엇이든 가능하지만 브라우저는 알 수 없거나 잘못된 문자를 삭제합니다.
이렇게 하면 두 가지 옵션이 남습니다.
- 사용
type="text"그리고 패턴 검증은 다음과 같습니다pattern="[0-9]+([\.,][0-9]+)*"에서와 같이 값의 형식을 자동으로 지정하면서 사용자가 입력할 수 있는 내용을 제한합니다. 당신의 모범. - 원하는 방식으로 숫자를 렌더링하고 사용자가 사용자 정의를 계속 사용할 수 있도록 입력 필드 위에 오버레이를 배치합니다.
type="number"다음과 같은 입력 컨트롤 여기서 시연.
후자의 솔루션은 추가 방법을 사용합니다. <label> 현재 값을 포함하고 입력 필드에 초점을 맞추면 CSS를 통해 숨겨지는 태그입니다.
다른 팁
step 입력에 number 속성을 추가해야합니다.
<input type="number" step="0.01" />
이렇게하면 부동 가수가 허용됩니다.
또한 Firefox의 number 입력에서 버그 스레드를 검토하는 것이 좋습니다.이 입력 유형을 사용하여 이 아니라 ff의 릴리스에서 에서 not 을 고려할 수 있습니다.
수년이 지난 지금도 이를 위한 HTML5 솔루션은 아직 없습니다.
나는 사용하고있다 <input type="tel"> 또는 <input type="text"> ("tel"을 누르면 Android 및 iOS에서 숫자 키보드가 표시되는데, 경우에 따라 이는 보너스입니다.)
그런 다음 다음과 같은 지시문이 필요했습니다.
- 숫자가 아닌 문자 필터링
- 사용자 유형에 따라 천 단위로 구분된 쉼표를 추가하세요.
- 사용
$parsers그리고keyup설정elem.val()그리고$formatters디스플레이를 설정하려면... - ...무대 뒤에서 할당
ng-model부동 소수점 숫자
아래 지시문 예제에서는 이를 수행하며 양수 또는 정수만 사용하도록 지정하지 않는 한 음수 및 부동 소수점 숫자를 허용합니다.
제가 원하는 완전한 솔루션은 아니지만 격차를 해소한다고 생각합니다.
HTML
<input type="text" ng-model="someNumber" number-input />
자바스크립트
myApp.directive('numberInput', function($filter) {
return {
require: 'ngModel',
link: function(scope, elem, attrs, ngModelCtrl) {
ngModelCtrl.$formatters.push(function(modelValue) {
return setDisplayNumber(modelValue, true);
});
// it's best to change the displayed text using elem.val() rather than
// ngModelCtrl.$setViewValue because the latter will re-trigger the parser
// and not necessarily in the correct order with the changed value last.
// see http://radify.io/blog/understanding-ngmodelcontroller-by-example-part-1/
// for an explanation of how ngModelCtrl works.
ngModelCtrl.$parsers.push(function(viewValue) {
setDisplayNumber(viewValue);
return setModelNumber(viewValue);
});
// occasionally the parser chain doesn't run (when the user repeatedly
// types the same non-numeric character)
// for these cases, clean up again half a second later using "keyup"
// (the parser runs much sooner than keyup, so it's better UX to also do it within parser
// to give the feeling that the comma is added as they type)
elem.bind('keyup focus', function() {
setDisplayNumber(elem.val());
});
function setDisplayNumber(val, formatter) {
var valStr, displayValue;
if (typeof val === 'undefined') {
return 0;
}
valStr = val.toString();
displayValue = valStr.replace(/,/g, '').replace(/[A-Za-z]/g, '');
displayValue = parseFloat(displayValue);
displayValue = (!isNaN(displayValue)) ? displayValue.toString() : '';
// handle leading character -/0
if (valStr.length === 1 && valStr[0] === '-') {
displayValue = valStr[0];
} else if (valStr.length === 1 && valStr[0] === '0') {
displayValue = '';
} else {
displayValue = $filter('number')(displayValue);
}
// handle decimal
if (!attrs.integer) {
if (displayValue.indexOf('.') === -1) {
if (valStr.slice(-1) === '.') {
displayValue += '.';
} else if (valStr.slice(-2) === '.0') {
displayValue += '.0';
} else if (valStr.slice(-3) === '.00') {
displayValue += '.00';
}
} // handle last character 0 after decimal and another number
else {
if (valStr.slice(-1) === '0') {
displayValue += '0';
}
}
}
if (attrs.positive && displayValue[0] === '-') {
displayValue = displayValue.substring(1);
}
if (typeof formatter !== 'undefined') {
return (displayValue === '') ? 0 : displayValue;
} else {
elem.val((displayValue === '0') ? '' : displayValue);
}
}
function setModelNumber(val) {
var modelNum = val.toString().replace(/,/g, '').replace(/[A-Za-z]/g, '');
modelNum = parseFloat(modelNum);
modelNum = (!isNaN(modelNum)) ? modelNum : 0;
if (modelNum.toString().indexOf('.') !== -1) {
modelNum = Math.round((modelNum + 0.00001) * 100) / 100;
}
if (attrs.positive) {
modelNum = Math.abs(modelNum);
}
return modelNum;
}
}
};
});
, 만 숫자 만 걸리게하기 때문에 type=number 값을 사용할 수 없으므로 쉼표를 추가하면 문자열이됩니다.
쉼표를 원한다면 자신의 통제를 만드는 것이 좋습니다.하나는 실제 값 (숫자)과 디스플레이 값 (문자열)입니다.
이 문제를 해결할 수 있습니다. 내가 여기서 본 지침을 수정했습니다 ... 입력은 어떻게 입력을 제한합니까?수락 숫자? ...
여기에 수정 된 지시문이 있습니다 ...이 지시문은 Keyup 이벤트를 사용하여 즉시 입력을 수정합니다 ...
.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="amountallocated" id="amountallocated" numeric-only />
