HTML5 नंबर इनपुट (क्लाइंट-साइड) में अल्पविराम के बजाय बल दशमलव बिंदु

Question

मैंने देखा है कि कुछ ब्राउज़र input type="number"संख्याओं के अंकन को स्थानीय बनाते हैं।

इसलिए अब, उन क्षेत्रों में जहां मेरा आवेदन देशांतर और अक्षांश निर्देशांक प्रदर्शित करता है, मुझे "51,983" जैसे सामान मिलते हैं, जहां इसे "51.982559" होना चाहिए। मेरा समाधान input type="text"इसके बजाय उपयोग करना है, लेकिन मैं दशमलव के सही प्रदर्शन के साथ संख्या इनपुट का उपयोग करना चाहूंगा।

क्या क्लाइंट-साइड स्थानीय सेटिंग्स की परवाह किए बिना, ब्राउज़र को संख्या बिंदु में दशमलव बिंदु का उपयोग करने के लिए मजबूर करने का एक तरीका है ?

(यह कहे बिना जाता है कि मेरे आवेदन में मैं वैसे भी सर्वर साइड पर इसे सही करता हूं, लेकिन मेरे सेटअप में मुझे क्लाइंट पक्ष (कुछ जावास्क्रिप्ट के कारण) पर सही होने की भी आवश्यकता है।

अग्रिम में धन्यवाद।

अद्यतन अभी, विंडोज 7 पर क्रोम संस्करण 28.0.1500.71 मीटर में जाँच, नंबर इनपुट सिर्फ एक अल्पविराम के साथ स्वरूपित दशमलव स्वीकार नहीं करता है। stepविशेषता केसाथ प्रस्तावित सुझावकाम नहीं करते।

http://jsfiddle.net/AsJsj/

Comments

क्या आपने अभी तक कोई समाधान पाया है? मैं विंडोज पर क्रोम 11 पर लगभग एक ही समस्या का सामना कर रहा हूं।

— कोस्टा फास

अभी तक कोई हल नहीं निकला। सबसे अच्छा अनुमान यह है कि इससे बचें (और इनपुट प्रकार = "टेक्स्ट" का उपयोग करें) जब तक यह तय नहीं हो जाता ...

— चॉकलेटी

ऐसा लगता है कि आपके ब्राउज़र के स्थानों पर निर्भर है, मेरे क्रोम में मुझे कॉमा दिखाई देता है, मेरे साथी के क्रोम में मुझे डॉट दिखाई देता है।

— फर्गिलीन

यहां भी देखें: stackoverflow.com/a/24423879/196210

— रिजल्ट

जैसा कि मैंने हाल ही में पाया है, कुछ देश 'दशमलव बिंदु' के बजाय अल्पविराम का उपयोग करते हैं।

— jbutler483

Answer 1

वर्तमान में, फ़ायरफ़ॉक्स HTML तत्व की भाषा का सम्मान करता है जिसमें इनपुट रहता है। उदाहरण के लिए, फ़ायरफ़ॉक्स में इस फिडेल को आज़माएँ:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/1/

आप देखेंगे कि अंक अरबी में हैं, और अल्पविराम का उपयोग दशमलव विभाजक के रूप में किया जाता है, जो अरबी के मामले में है। ऐसा इसलिए है क्योंकि BODYटैग को विशेषता दी गई है lang="ar-EG"।

अगला, यह एक प्रयास करें:

http://jsfiddle.net/ashraf_sabry_m/yzzhop75/2/

यह एक दशमलव विभाजक के रूप में एक डॉट के साथ प्रदर्शित किया जाता है क्योंकि इनपुट किसी DIVदिए गए विशेषता में लपेटा जाता है lang="en-US"।

तो, आप जिस समाधान का सहारा ले सकते हैं, वह आपके संख्यात्मक इनपुट को एक कंटेनर तत्व के साथ लपेटना है जो एक संस्कृति का उपयोग करने के लिए सेट है जो दशमलव विभाजक के रूप में डॉट्स का उपयोग करता है।

Comments

दिलचस्प! दुर्भाग्य से यह केवल फ़ायरफ़ॉक्स में काम करने लगता है, क्रोम में नहीं (47.0.2526.106)

— luis.ap.uyen

यहाँ तक कि फ़ायरफ़ॉक्स में भी नहीं, फ्रांस में

— ऑबिन

फ़ायरफ़ॉक्स पृष्ठ की भाषा सेटिंग का सम्मान करता है। Chrome OS या ब्राउज़र के दशमलव विभाजक को लागू करता है? एज पेज या ब्राउज़र या ओएस की भाषा सेटिंग्स की परवाह किए बिना, दशमलव बिंदु लगाता है। क्या झंझट है।

— bbsimonbb

आपको आवरण तत्व की आवश्यकता नहीं है। आप langविशेषता को सीधे इनपुट तत्व पर सेट कर सकते हैं ।

— जेनी ओ'रिली ने

langविशेषता वास्तव में, मेरे लिए फर्क पड़ा धन्यवाद!

— स्पाकार

Answer 2

आप चाहते हैं कि दशमलव की शुद्धता के लिए निर्दिष्ट कदम विशेषता के साथ , और लैंग विशेषता [जो एक अवधि के साथ दशमलव को प्रारूपित करता है ] के लिए सेट है , आपका html5 संख्यात्मक इनपुट दशमलव को स्वीकार करेगा। जैसे। मान लेने के लिए जैसे 10.56; मेरा मतलब है 2 दशमलव स्थान संख्याएँ, ऐसा करें:

<input type="number" step="0.01" min="0" lang="en" value="1.99">

आप अधिकतम स्वीकार्य मूल्य के लिए अधिकतम विशेषता निर्दिष्ट कर सकते हैं ।

संपादित एक जोड़े लैंग एक स्थान मूल्य के साथ इनपुट तत्व को विशेषता है कि अल्पविराम के बजाय बिंदु के साथ प्रारूपों दशमलव

Comments

यह अभी भी काम नहीं करता है :-( क्लाइंट-साइड स्थानीय मान हमेशा दशमलव बिंदु को दशमलव अल्पविराम में बदल देता है, चाहे वह चरण या मूल्य विशेषता हो ।:-(

— chocolata

जैसा कि मैं समझता हूं कि प्रश्न दशमलव विभाजक होने के बारे में नहीं है। सवाल 'होने' के बारे में है। 'के बजाय,' जब ग्राहक का स्थान पसंद करता है ','।

— इमानुएल पौलिनी

कोई फर्क नहीं पड़ता कि आप स्टेप एट्रीब्यूट में किस दशमलव विभाजक का उपयोग करते हैं - ब्राउज़र अभी भी इसे स्थानीय करेगा। यानी आपके उदाहरण के साथ - अधिकांश यूरोपीय देशों में प्रदर्शित संख्या

— १०,५६

मैं वापस आया और 5 साल बाद सवाल फिर से पढ़ा और सोचा कि मैंने ऊपर जवाब क्यों दिया। संपादन देखें, कृपया

— पीटर

यह भी काम नहीं करेगा अगर डेटा को अजाक्स का उपयोग करके बचाया जा रहा है।

— कुछ समय

Answer 3

युक्ति के अनुसार , आप विशेषता anyके मूल्य के रूप में उपयोग कर सकते हैं step:

<input type="number" step="any">

Answer 4

इनपुट पर जिम्मेदार लैंग का उपयोग करें। इनपुट नंबर पर मेरे वेब ऐप fr_FR, lang = "en_EN" पर लोकेल और मैं उदासीन रूप से अल्पविराम या डॉट का उपयोग कर सकता हूं। फ़ायरफ़ॉक्स हमेशा एक डॉट प्रदर्शित करता है, क्रोम एक कॉमा प्रदर्शित करता है। लेकिन दोनों सीपोर मान्य हैं।

Answer 5

अफसोस की बात है कि आधुनिक ब्राउज़रों में इस इनपुट फ़ील्ड का कवरेज बहुत कम है:

http://caniuse.com/#feat=input-number

इसलिए, मैं फॉलबैक की उम्मीद करता हूं और काम करने के लिए एक भारी-प्रोग्राम-लोड किए गए इनपुट [टाइप = टेक्स्ट] पर भरोसा करता हूं, जब तक कि आम तौर पर स्वीकार नहीं किया जाता है।

अब तक, केवल क्रोम, सफारी और ओपेरा का ही साफ-सुथरा क्रियान्वयन होता है, लेकिन अन्य सभी ब्राउजर बग्गी हैं। उनमें से कुछ, दशमलव (जैसे BB10) का भी समर्थन नहीं करते हैं!

Comments

नंबर की तरह एक पुस्तकालय का उपयोग करना । इस ग्रह पर कई भाषाएं होने की अंतर्निहित समस्याओं के साथ मदद मिल सकती है।

— 10x14 pintxo

Answer 6

मुझे नहीं पता कि यह मदद करता है, लेकिन मैं इस समस्या के लिए खोज करते समय यहां ठोकर खाई, केवल इनपुट के दृष्टिकोण से (यानी मैंने देखा कि मेरा <input type="number" />मूल्य टाइप करते समय अल्पविराम और डॉट दोनों को स्वीकार किया गया था, लेकिन केवल बाद वाला था कोणीयजल्स मॉडल के लिए बाध्य किया जा रहा है जिसे मैंने इनपुट को सौंपा है)। इसलिए मैंने इस त्वरित निर्देश को नीचे रखकर हल किया:

.directive("replaceComma", function() {
    return {
        restrict: "A",
        link: function(scope, element) {
            element.on("keydown", function(e) {
                if(e.keyCode === 188) {
                    this.value += ".";
                    e.preventDefault();
                }
            });
        }
    };
});

फिर, मेरे html पर, बस: <input type="number" ng-model="foo" replace-comma />उपयोगकर्ताओं को इनपुट करने से रोकने के लिए फ्लाइट पर कॉमा को स्थानापन्न करेगा, जो कि एक जावास्क्रिप्ट (किसी एक स्थान से नहीं! चीयर्स।

Comments

हाय एंड्रिया, क्या एंगुलर जेएस के बिना ऐसा करने का कोई तरीका है? उदाहरण के लिए jQuery के साथ?

— Chocolata

यकीन है, मुझे लगता है कि आप प्रति-इनपुट-इनपुट आधार पर लिख सकते हैं, कुछ ऐसा $("input[type=number]").on("keydown", function(e) { if(e.keyCode === 188) { this.value += "."; e.preventDefault(); }});(एक बार जब आपका पृष्ठ पूरी तरह से सभी संख्याओं के इनपुट के साथ लोड हो जाता है)

— एंड्रिया एलोइ

यह स्निपेट क्रोम (v60 के साथ परीक्षण) पर काम नहीं करता है। टाइप करते समय 888,, valueप्रॉपर्टी सेट करना एक चेतावनी देता है, जिसमें कहा गया है कि 888.एक वैध संख्या नहीं है (regexp को डॉट के बाद कम से कम एक नंबर की आवश्यकता होती है) और फ़ील्ड को खाली करता है। एक बिंदु टाइप करना हालांकि, शायद इसलिए कि इनपुट "मूल्य" प्रगति पर विचार करता है और टाइप करने के लिए अधिक अंकों की प्रतीक्षा करता है

— svvac

Answer 7

मुझे एक ब्लॉग लेख मिला जो कुछ संबंधित समझाता है:
HTML5 इनपुट प्रकार = संख्या और क्रोम में दशमलव / फ़्लोट्स

संक्षेप में:

• stepमान्य मानों के डोमेन को परिभाषित करने में मदद करता है
• डिफ़ॉल्ट stepहै1
• इस प्रकार डिफ़ॉल्ट डोमेन पूर्णांक (बीच में minऔर maxसमावेशी, यदि दिया गया है)

मुझे लगता है कि एक दशमलव के रूप में एक अल्पविराम बनाम एक अल्पविराम के रूप में अल्पविराम का उपयोग करने की अस्पष्टता के साथ सामना कर रहा है, और अपने 51,983 वास्तव में एक अजीब-पचास-एक हजार, नौ सौ और आठ-तीन है।

जाहिरा तौर पर आप step="any"डोमेन को सभी तर्कसंगत संख्याओं तक सीमित करने के लिए उपयोग कर सकते हैं , हालाँकि मैंने इसे स्वयं नहीं आज़माया है। अक्षांश और देशांतर के लिए मैंने सफलतापूर्वक उपयोग किया है:

<input name="lat" type="number" min="-90.000000" max="90.000000" step="0.000001">
<input name="lon" type="number" min="-180.000000" max="180.000000" step="0.000001">

यह सुंदर नहीं हो सकता है, लेकिन यह काम करता है।

Comments

उस मामले में यह एक अच्छी बात है जो मैंने एक सारांश लिखा है और फिर एक्स्ट्रापोलिटेड है, एह?

— मैट्टी के।

Answer 8

जहां तक ​​मैं इसे समझता हूं, एचटीएमएल 5 input type="numberहमेशा input.valueएक के रूप में लौटता है string।

जाहिर है, input.valueAsNumberएक अस्थायी बिंदु संख्या के रूप में वर्तमान मूल्य देता है। आप इसका उपयोग अपने इच्छित मूल्य को वापस करने के लिए कर सकते हैं।

Http://diveintohtml5.info/forms.html#type-number देखें

Comments

धन्यवाद, यह उपयोगी हो सकता है!

— Chocolata

मजेदार बात यह है कि input.valueवास्तव में एक कोना के रूप में दिखाने के बावजूद एक बिंदु के साथ एक कैनोनिकल नंबर देता है। तो एक यूरोपीय तीसरी दुनिया के देश में रहने वाले बेकार है ...

— केल्सुन

Answer 9

क्या आपने इसके लिए जावास्क्रिप्ट का उपयोग करने पर विचार किया है?

$('input').val($('input').val().replace(',', '.'));

Comments

इनपुट के साथ क्रोम पर [टाइप = नंबर] काम नहीं कर रहा है .. कॉमा हमेशा दिखाया जाता है।

— छला

Answer 10

एक विकल्प है javascript parseFloat()... कभी भी पार्स न करें "एक text chain" --> 12.3456बिंदु के साथ एक इंट ...123456 (इंट को हटाएं) एक टेक्स्ट चेन को पार्सो ...

इस कोर्ड्स को सर्वर पर भेजने के लिए टेक्स्ट चेन भेजना। HTTPकेवल भेजता हैTEXT

क्लाइंट में " int" के साथ इनपुट कोर्ड्स पार्सिंग से बाहर रहते हैं , टेक्स्ट स्ट्रिंग्स के साथ काम करते हैं

यदि आप HTML में php या इसी तरह की डोरियों को प्रिंट करते हैं ... टेक्स्ट में फ्लोट करें और html में प्रिंट करें

Answer 11

1) 51,983 एक स्ट्रिंग प्रकार है जो कॉमा को स्वीकार नहीं करता है

इसलिए आप इसे पाठ के रूप में सेट करें

<input type="text" name="commanumber" id="commanumber" value="1,99" step='0.01' min='0' />

से बदलो ।

और नंबर के लिए टाइप विशेषता बदलें

$(document).ready(function() {
    var s = $('#commanumber').val().replace(/\,/g, '.');   
    $('#commanumber').attr('type','number');   
    $('#commanumber').val(s);   
});

चेक आउट http://jsfiddle.net/ydf3kxgu/

आशा है इससे तुम्हारी समस्या का समाधान हो गया होगा

Comments

दरअसल, टेक्स्ट के रूप में सेटिंग टाइप करना वास्तव में पॉइंट स्टे पॉइंट बनाने का एकमात्र समाधान है। के साथ मिलकर pattern="\d+\.\d{2}"मैं भी ऐसे UX को स्वीकार्य कहूंगा ... मैं jquery के हिस्से को छोड़

— दूंगा

Answer 12

पैटर्न का उपयोग करें

<input 
       type="number" 
       name="price"
       pattern="[0-9]+([\.,][0-9]+)?" 
       step="0.01"
       title="This should be a number with up to 2 decimal places."
>

सौभाग्य

Comments

नमस्ते, बस इसे विंडोज 62 पर क्रोम 62.0.3202.94 में परीक्षण किया गया। यह काम नहीं करता है। स्पिनर बटन का उपयोग करते समय, इनपुट बिंदु (बेल्जियम लोकेल सेटिंग पर विचार) के बजाय अल्पविराम पर लौटता है। फिर भी धन्यवाद।

— Chocolata

Answer 13

मैंने ऐसा करने के लिए एक कस्टम कोड ऑफ़ कोड लिखा है

आप बदलना चाहते हैं ,के साथ ., निकालें translate_decimals पूरी तरह से काम करता है।

var input = document.querySelector('input[role="custom-number"]');
var bincr = document.querySelector('button[role="increment"]');
var bdecr = document.querySelector('button[role="decrement"]');

function translate_decimals(side = 0)
{
	input.value = (side == ',' ? input.value.replace('.',',') : input.value.replace(',','.'));
}
translate_decimals(',');

bincr.addEventListener('click', ()=>{
	if (input.hasAttribute('max'))
	{
		if (input.value.substr(0,input.getAttribute('max').length) == input.getAttribute('max').substr(0,input.getAttribute('max').length))
		{
			return;
		}
		else
		{
			translate_decimals('.');
			let temp = input.value;
			input.value = "";
			input.value = (input.hasAttribute('step') ? (parseFloat(temp) + parseFloat(input.getAttribute('step'))) : temp++);
			translate_decimals(',');
		}
	}
});

bdecr.addEventListener('click', ()=>{
	if (input.hasAttribute('min'))
	{
		if (input.value.substr(0,input.getAttribute('min').length) == input.getAttribute('min').substr(0,input.getAttribute('min').length))
		{
			return;
		}
		else
		{
			translate_decimals('.');
			input.value = (input.hasAttribute('step') ? (input.value - input.getAttribute('step')) : input.value--);
			translate_decimals(',');
		}
	}
});

/* styling increment & decrement buttons */
button[role="increment"],
button[role="decrement"] {
	width:32px;
}

<input type="text" role="custom-number" step="0.01" min="0" max="0" lang="en" value="1.99">
<button role="increment">+</button>
<button role="decrement">-</button>

Answer 14

मुझे यह सुनिश्चित करने की जरूरत है कि दशमलव विभाजक के रूप में मानों को अभी भी एक अल्पविराम के साथ दर्ज किया जा सकता है। यह एक सदियों पुरानी समस्या है। इन लिंक्स के बाद पृष्ठभूमि की जानकारी मिल सकती है:

• https://www.slightfuture.com/webdev/html5-input-number-localization.html
• https://codepen.io/aminimalanimal/full/bdOzRG

मैंने आखिरकार इसे थोड़ा सा jQuery के साथ हल किया। डॉट्स ऑन चेंज के साथ कॉमा की जगह। यह नवीनतम फ़ायरफ़ॉक्स, क्रोम और सफारी में अब तक अच्छा काम कर रहा है।

$('input[type=number]').each(function () {

  $(this).change(function () {

    var $replace = $(this).val().toString().replace(/,/g, '.');

    $(this).val($replace);

  })

});

Answer 15

HTML चरण विशेषता

<input type="number" name="points" step="3">

उदाहरण: यदि चरण = "3", कानूनी संख्या -3, 0, 3, 6, आदि हो सकती है।

 

युक्ति: कानूनी मूल्यों की एक श्रृंखला बनाने के लिए अधिकतम और न्यूनतम विशेषताओं के साथ चरण विशेषता का उपयोग किया जा सकता है।

नोट: चरण विशेषता निम्नलिखित इनपुट प्रकारों के साथ काम करती है: संख्या, श्रेणी, तिथि, डेटाटाइम, डेटाइम-लोकल, महीना, समय और सप्ताह।

Comments

लेकिन ... लेकिन सवाल दशमलव संख्याओं के बारे में है, step="3"केवल पूरे संख्याओं तक इनपुट को सीमित करेगा। और सेटिंग step="0.01"अभी भी इसे कोमा के रूप में दिखाता है; सी

— केल्सुन