क्या स्वरूपित करने का कोई तरीका है input[type='number'] हमेशा 2 दशमलव स्थानों को दिखाने के लिए मान ?
उदाहरण: मैं 0.00इसके बजाय देखना चाहता हूं 0।
क्या स्वरूपित करने का कोई तरीका है input[type='number'] हमेशा 2 दशमलव स्थानों को दिखाने के लिए मान ?
उदाहरण: मैं 0.00इसके बजाय देखना चाहता हूं 0।
जवाबों:
पूर्णांक पर प्रारूप को लागू करने के लिए सुझावों का पालन करना और jQuery का एक टुकड़ा जोड़ना:
parseFloat($(this).val()).toFixed(2)changeहर बार फ़ील्ड में परिवर्तन करने के लिए आप इस कोड को इसे ट्रिगर करने की विधि में जोड़ सकते हैं : stackoverflow.com/a/58502237/2056125
आप वास्तव में नहीं हो सकते, लेकिन आप एक आधा कदम हो सकते हैं:
<input type='number' step='0.01' value='0.00' placeholder='0.00' />stepविशेषता का उपयोग करके इसे सक्षम करेगा । यह न केवल यह निर्धारित करता है कि इसे कितना चक्र करना है, लेकिन स्वीकार्य संख्या, साथ ही साथ। उपयोग step="0.01" करना चाल को करना चाहिए लेकिन यह इस बात पर निर्भर हो सकता है कि ब्राउज़र मानक का पालन कैसे करता है।
<input type='number' step='0.01' value='5.00'>input[type="text"]सभी देशी घंटियों और सीटी के साथ देख रहे हैं जो इसके input[type="number"]लिए पूरी तरह से reimplimented के साथ आते हैं , या तत्व राज्य के आधार पर मूल्य प्रदर्शित करने के लिए इस फ़ील्ड को दूसरे के लिए स्वैप कर रहे हैं।
जो समाधान input="number" step="0.01"क्रोम में मेरे लिए बहुत अच्छा काम करते हैं, हालांकि कुछ ब्राउज़रों में काम नहीं करते हैं, विशेष रूप से मेरे मामले में फ्रंटफोमेशन फ़ायरफ़ॉक्स 35 .. जिसका मुझे समर्थन करना चाहिए।
मेरा समाधान इगोर एस्कोबार के jQuery मास्क प्लगइन के साथ jQuery के लिए था, निम्नानुसार है:
<script src="/your/path/to/jquery-mask.js"></script>
<script>
$(document).ready(function () {
$('.usd_input').mask('00000.00', { reverse: true });
});
</script>
<input type="text" autocomplete="off" class="usd_input" name="dollar_amt">यह अच्छी तरह से काम करता है, निश्चित रूप से किसी को जमा किए गए मूल्य की जांच करनी चाहिए :) नोट, अगर मुझे ब्राउज़र संगतता के लिए ऐसा करने की आवश्यकता नहीं थी, तो मैं @ उत्तर ब्रैडशॉ द्वारा उपरोक्त उत्तर का उपयोग करूंगा।
typeविशेषता है numberया , तो आप परीक्षण करके यह देख सकते हैं text। यदि यह textHTML के लिखे जाने के numberबाद भी वापस आता है , तो ब्राउज़र उस प्रकार का समर्थन नहीं करता है, और इस व्यवहार को उसके लिए हुक करना एक उचित कार्रवाई है।
@Guilherme Ferreira के इस जवाब के आधार पर आप parseFloatहर बार क्षेत्र में बदलाव के लिए विधि को ट्रिगर कर सकते हैं। इसलिए मान हमेशा दो दशमलव स्थानों को दिखाता है, भले ही कोई उपयोगकर्ता किसी संख्या को मैन्युअल रूप से मान बदल देता हो।
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".floatNumberField").change(function() {
$(this).val(parseFloat($(this).val()).toFixed(2));
});
});
</script>
<input type="number" class="floatNumberField" value="0.00" placeholder="0.00" step="0.01" />change()कि उपयोगकर्ता इनपुट और सबमिट बटन क्लिक के बीच फ़ंक्शन को छोटे समय में चालू किया जाएगा। इसलिए, यह एक समस्या नहीं होनी चाहिए।
यदि उपयोगकर्ता ने टाइपिंग पूरी नहीं की है, तो यह स्वचालित रूप से 2 स्थानों पर गोलाई लिए बिना अधिकतम 2 दशमलव स्थानों को लागू करने का काम करता है।
function naturalRound(e) {
let dec = e.target.value.indexOf(".")
let tooLong = e.target.value.length > dec + 3
let invalidNum = isNaN(parseFloat(e.target.value))
if ((dec >= 0 && tooLong) || invalidNum) {
e.target.value = e.target.value.slice(0, -1)
}
}यदि आप यहाँ आकर सोच रहे हैं कि 2 दशमलव स्थानों तक कैसे सीमित किया जाए तो मेरे पास एक देशी जावास्क्रिप्ट समाधान है:
जावास्क्रिप्ट:
function limitDecimalPlaces(e, count) {
if (e.target.value.indexOf('.') == -1) { return; }
if ((e.target.value.length - e.target.value.indexOf('.')) > count) {
e.target.value = parseFloat(e.target.value).toFixed(count);
}
}HTML:
<input type="number" oninput="limitDecimalPlaces(event, 2)" />ध्यान दें कि यह AFAIK नहीं कर सकता है, संख्या इनपुट के साथ इस क्रोम बग के खिलाफ बचाव करें ।
मुझे पता है कि यह एक पुराना सवाल है, लेकिन मुझे ऐसा लगता है कि इनमें से कोई भी जवाब इस सवाल का जवाब नहीं देता है, इसलिए उम्मीद है कि यह भविष्य में किसी की मदद करेगा।
हाँ, आप हमेशा 2 दशमलव स्थानों को दिखा सकते हैं, लेकिन दुर्भाग्य से यह अकेले तत्व विशेषताओं के साथ नहीं किया जा सकता है, आपको जावास्क्रिप्ट का उपयोग करना होगा।
मुझे यह इंगित करना चाहिए कि यह बड़ी संख्या के लिए आदर्श नहीं है क्योंकि यह हमेशा पीछे चलने वाले शून्य को मजबूर करेगा, इसलिए उपयोगकर्ता को 9.99 से अधिक मूल्य निर्धारित करने के लिए पात्रों को हटाने के बजाय कर्सर को वापस ले जाना होगा।
//Use keyup to capture user input & mouse up to catch when user is changing the value with the arrows
$('.trailing-decimal-input').on('keyup mouseup', function (e) {
// on keyup check for backspace & delete, to allow user to clear the input as required
var key = e.keyCode || e.charCode;
if (key == 8 || key == 46) {
return false;
};
// get the current input value
let correctValue = $(this).val().toString();
//if there is no decimal places add trailing zeros
if (correctValue.indexOf('.') === -1) {
correctValue += '.00';
}
else {
//if there is only one number after the decimal add a trailing zero
if (correctValue.toString().split(".")[1].length === 1) {
correctValue += '0'
}
//if there is more than 2 decimal places round backdown to 2
if (correctValue.toString().split(".")[1].length > 2) {
correctValue = parseFloat($(this).val()).toFixed(2).toString();
}
}
//update the value of the input with our conditions
$(this).val(correctValue);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="my-number-input" class="form-control trailing-decimal-input" type="number" min="0.01" step="0.01" value="0.00" />यह .toFixed(2)दो दशमलव स्थानों के लिए फ़ंक्शन का उपयोग करके JQuery में एक त्वरित फ़ॉर्मेटर है ।
<input class="my_class_selector" type='number' value='33'/>
// if this first call is in $(document).ready() it will run
// after the page is loaded and format any of these inputs
$(".my_class_selector").each(format_2_dec);
function format_2_dec() {
var curr_val = parseFloat($(this).val());
$(this).val(curr_val.toFixed(2));
}विपक्ष: आपको हर बार यह कॉल करना होगा कि इनपुट नंबर को इसे सुधारने के लिए बदल दिया गया है।
// listener for input being changed
$(".my_class_selector").change(function() {
// potential code wanted after a change
// now reformat it to two decimal places
$(".my_class_selector").each(format_2_dec);
});नोट: किसी कारण से भले ही इनपुट 'नंबर' का हो, jQuery val()एक स्ट्रिंग देता है। इसलिए द parseFloat()।
मेरा पसंदीदा दृष्टिकोण, जो dataसंख्या की स्थिति को पकड़ने के लिए विशेषताओं का उपयोग करता है :
<input type='number' step='0.01'/>
// react to stepping in UI
el.addEventListener('onchange', ev => ev.target.dataset.val = ev.target.value * 100)
// react to keys
el.addEventListener('onkeyup', ev => {
// user cleared field
if (!ev.target.value) ev.target.dataset.val = ''
// non num input
if (isNaN(ev.key)) {
// deleting
if (ev.keyCode == 8)
ev.target.dataset.val = ev.target.dataset.val.slice(0, -1)
// num input
} else ev.target.dataset.val += ev.key
ev.target.value = parseFloat(ev.target.dataset.val) / 100
})शीर्ष उत्तर ने मुझे समाधान दिया लेकिन मुझे यह पसंद नहीं आया कि उपयोगकर्ता इनपुट को तुरंत बदल दिया गया था इसलिए मैंने देरी को जोड़ा जो मेरी राय में बेहतर अनुभव के लिए योगदान देता है
var delayTimer;
function input(ele) {
clearTimeout(delayTimer);
delayTimer = setTimeout(function() {
ele.value = parseFloat(ele.value).toFixed(2).toString();
}, 800);
}<input type='number' oninput='input(this)'>import { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'replace'
})
export class ReplacePipe implements PipeTransform {
transform(value: any): any {
value = String(value).toString();
var afterPoint = '';
var plus = ',00';
if (value.length >= 4) {
if (value.indexOf('.') > 0) {
afterPoint = value.substring(value.indexOf('.'), value.length);
var te = afterPoint.substring(0, 3);
if (te.length == 2) {
te = te + '0';
}
}
if (value.indexOf('.') > 0) {
if (value.indexOf('-') == 0) {
value = parseInt(value);
if (value == 0) {
value = '-' + value + te;
value = value.toString();
}
else {
value = value + te;
value = value.toString();
}
}
else {
value = parseInt(value);
value = value + te;
value = value.toString();
}
}
else {
value = value.toString() + plus;
}
var lastTwo = value.substring(value.length - 2);
var otherNumbers = value.substring(0, value.length - 3);
if (otherNumbers != '')
lastTwo = ',' + lastTwo;
let newValue = otherNumbers.replace(/\B(?=(\d{3})+(?!\d))/g, ".") + lastTwo;
parseFloat(newValue);
return `${newValue}`;
}
}
}ui-number-maskकोणीय के लिए, https://github.com/assisrafael/angular-input-masks
केवल यह:
<input ui-number-mask ng-model="valores.irrf" />यदि आप एक-एक करके मूल्य डालते हैं ...।
need: 120,01अंक प्रति अंक
= 0,01
= 0,12
= 1,20
= 12,00
= 120,01 final number.इस पर एक नज़र डालें :
<input type="number" step="0.01" />
robot_speed = parseFloat(robot_speed).toFixed(2)