أنغولارجس عدد المدخلات تنسيق عرض
-
20-12-2019 - |
سؤال
أريد استخدام إدخال رقم منسق لإظهار ألف نقطة فصل للمستخدم عندما يكتب أرقاما كبيرة.هنا هو رمز التوجيه الذي استخدمته: http://jsfiddle.net/LCZfd/3/
عندما أستخدم input type="text"
إنه يعمل ، ولكن عندما أريد استخدامه input type="number"
انها تنظيف بغرابة من قبل شيء عند المستخدم كتابة أرقام كبيرة.
ما هي المشكلة input[number]
?
المحلول
كما هو مكتوب في التعليقات, input type="number"
لا يدعم أي شيء سوى الأرقام ، فاصل عشري (عادة ,
أو .
اعتمادا على اللغة) و -
أو e
.قد لا يزال أدخل كل ما تريد ، لكن المتصفح سيتجاهل أي حرف غير معروف / غير صحيح.
هذا يترك لك مع 2 خيارات:
- استخدام
type="text"
والتحقق من صحة نمط مثلpattern="[0-9]+([\.,][0-9]+)*"
للحد من ما قد يدخله المستخدم أثناء تنسيق القيمة تلقائيا كما تفعل في المثال الخاص بك. - وضع تراكب على رأس حقل الإدخال الذي يجعل الأرقام كيف تريد ولا يزال يسمح للمستخدم لاستخدام العرف
type="number"
ضوابط الإدخال ، مثل أظهر هنا.
الحل الأخير يستخدم إضافية <label>
العلامة التي تحتوي على القيمة الحالية ومخفية عبر كس عند التركيز على حقل الإدخال.
نصائح أخرى
تحتاج إلى إضافة step
السمة إلى الخاص بك number
المدخلات.
<input type="number" step="0.01" />
هذا سيسمح بالنقاط العائمة.
أيضا ، أوصي بمراجعة مؤشر ترابط الأخطاء على number
المدخلات في فايرفوكس.قد ترغب في النظر لا باستخدام نوع الإدخال هذا ، حيث تم دعمه أخيرا هذا الافراج عن وما يليها.
كل هذه السنوات في وقت لاحق ، لا يزال هناك حل هتمل5 من خارج منطقة الجزاء لهذا.
أنا أستخدم <input type="tel">
أو <input type="text">
("هاتف" إحضار لوحة مفاتيح رقمية في الروبوت ودائرة الرقابة الداخلية ، والتي في بعض الحالات هو مكافأة.)
ثم كنت بحاجة إلى توجيه ل:
- تصفية الأحرف غير الرقمية
- إضافة الفواصل ألف فاصل كما أنواع المستخدم
- استخدام
$parsers
وkeyup
لتعيينelem.val()
و$formatters
لضبط العرض... - ...بينما وراء الكواليس ، تعيين
ng-model
رقم النقطة العائمة
المثال التوجيهي أدناه يفعل ذلك ، ويقبل السلبيات وأرقام الفاصلة العائمة ما لم تحدد أنك تريد فقط الأعداد الإيجابية أو الصحيحة.
انها ليست الحل الكامل أود ، ولكن أعتقد أنه يسد الفجوة.
أتش تي أم أل
<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
يأخذ فقط الأرقام ، إضافة فاصلة يجعلها سلسلة.
انظر http://jsfiddle.net/LCZfd/5
كنت أفضل حالا جعل الضوابط الخاصة بك إذا كنت تريد الفواصل.واحد مع القيمة الحقيقية (الرقم) وقيمة العرض (السلسلة).
يمكنك تجربة هذا ، لقد قمت بتعديل التوجيه الذي رأيته هنا...كيف يمكنني تقييد المدخلات لقبول الأرقام فقط? ...
وهنا التوجيه تعديل أدليت به...يستخدم هذا التوجيه الحدث كيوب لتعديل المدخلات على الطاير...
.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 />