HTML5: संख्या इनपुट प्रकार जो केवल पूर्णांक लेता है?

Question

मैं jQuery के टूल वैलिडेटर का उपयोग कर रहा हूँ जो HTML5 सत्यापन को jQuery के माध्यम से लागू करता है। यह एक चीज को छोड़कर अब तक बहुत अच्छा काम कर रहा है। HTML5 विनिर्देश में, इनपुट प्रकार "संख्या" में पूर्णांक और फ्लोटिंग-पॉइंट संख्या दोनों हो सकते हैं। यह अविश्वसनीय रूप से अदूरदर्शी लगता है क्योंकि यह केवल एक उपयोगी सत्यापनकर्ता होगा जब आपके डेटाबेस फ़ील्ड फ़्लोटिंग-पॉइंट नंबरों पर हस्ताक्षर किए जाते हैं (अहस्ताक्षरित ints के लिए आपको "पैटर्न" सत्यापन पर वापस आना होगा और इस तरह अप और डाउन जैसी अतिरिक्त सुविधाओं को खोना होगा। ब्राउज़रों के लिए तीर जो इसका समर्थन करते हैं)। क्या कोई अन्य इनपुट प्रकार या शायद एक विशेषता है जो इनपुट को केवल अहस्ताक्षरित पूर्णांक तक सीमित कर देगा? मुझे कोई नहीं मिला, धन्यवाद।

संपादित करें

ठीक है, दोस्तों, मैं आपके समय और मदद की सराहना करता हूं, लेकिन मुझे कई अवांछनीय वोटिंग दिखाई देती हैं: डी। चरण 1 को सेट करना जवाब नहीं है क्योंकि यह इनपुट को प्रतिबंधित नहीं करता है। आप टेक्स्ट बॉक्स में अभी भी एक नकारात्मक फ्लोटिंग-पॉइंट नंबर टाइप कर सकते हैं। इसके अलावा, मुझे पैटर्न सत्यापन के बारे में पता है (मैंने अपनी मूल पोस्ट में इसका उल्लेख किया है), लेकिन यह सवाल का हिस्सा नहीं था। मैं जानना चाहता था कि एचटीएमएल 5 ने सकारात्मक पूर्णांक मूल्यों के लिए "नंबर" के इनपुट को प्रतिबंधित करने की अनुमति दी है या नहीं। इस सवाल का जवाब, ऐसा लगता है, "नहीं, यह नहीं होगा"। मैं पैटर्न सत्यापन का उपयोग नहीं करना चाहता था क्योंकि यह jQuery उपकरण सत्यापन का उपयोग करते समय कुछ कमियां पैदा करता है, लेकिन अब ऐसा लगता है कि विनिर्देश ऐसा करने के लिए एक क्लीनर तरीके की अनुमति नहीं देता है।

Comments

2019 तक - मुझे नहीं पता है कि कब से - numberइनपुट (एफएफ / क्रोम / सफारी में कम से कम) अब केवल डिफ़ॉल्ट रूप से पूर्णांकों को स्वीकार करता है, जब तक कि आप stepउस दशमलव के लिए एक स्पष्ट मान सेट नहीं करते हैं जो दशमलव मानों की अनुमति देता है; उदाहरण के लिए: step="0.01"। यहां MDN का दस्तावेजीकरण किया गया । इसके बारे में दो दिमागों में क्योंकि मुझे लगता है कि यह एक समझदार डिफ़ॉल्ट है, लेकिन एक ब्रेकिंग चेंज (हाँ, इसने मेरे लिखे कुछ कोड को प्रभावित किया है)।

— दरगाह ठीक

Answer 1

https://www.w3.org/wiki/HTML/Elements/input/number

सबसे अच्छा आप केवल HTML के साथ प्राप्त कर सकते हैं

<input type="number" min="0" step="1"/>

Comments

आप शायद स्थापित करना चाहिए minकरने के लिए 1के रूप में वह सकारात्मक संख्या (और नहीं गैर नकारात्मक संख्या) चाहता है।

— मार्टिन थोमा

@pwdst मैं दूसरा हूँ। <input type="number" min="0" step="1"/>प्रश्न का सबसे सही उत्तर है। वैसे भी, दोनों में step="1"और क्या बात है pattern="\d+"? मैं दोनों ही मामलों में फ्लोटिंग पॉइंट नंबर टाइप नहीं कर सकता।

— डेनिश अशफाक

यह मेरे लिए क्रोम के नवीनतम संस्करण पर काम नहीं करता था। यह अक्षरों को टाइप करने की अनुमति नहीं देता है, लेकिन यह विशेष वर्णों को सम्मिलित करने की अनुमति देता है।

— मालवोस

क्यों मैं

— अनुदान सूरज

10gr20 जैसे घातीय संख्याओं के लिए @grantsun।

— sn3ll

Answer 2

इसके लिए stepविशेषता सेट करें 1:

<input type="number" step="1" />

अभी क्रोम में यह थोड़ा छोटा लग रहा है, इसलिए हो सकता है कि यह सबसे अच्छा समाधान न हो।

एक बेहतर समाधान patternविशेषता का उपयोग करना है, जो इनपुट से मेल खाने के लिए एक नियमित अभिव्यक्ति का उपयोग करता है:

<input type="text" pattern="\d*" />

\dएक संख्या के लिए नियमित अभिव्यक्ति है, *इसका मतलब है कि यह उनमें से एक से अधिक को स्वीकार करता है। यहाँ डेमो है: http://jsfiddle.net/b8NrE/1/

Comments

जैसा कि JayPea ने सीखा है, सभी ब्राउज़र अभी तक सभी HTML5 तत्वों का समर्थन नहीं करते हैं, इसलिए जैसा कि आपने प्रस्तावित किया है, यह सुंदर अपमानजनक प्रदान करने के लिए सबसे अच्छा है।

— DOK

@Zut HTML5 सत्यापन आपको उन कुंजियों को दर्ज करने से नहीं रोकता है। यह केवल उन वर्णों के साथ फ़ॉर्म को भेजने से रोकता है। यदि आप उस प्रकार के इनपुट के साथ एक फ़ॉर्म सबमिट numberकरते हैं जिसमें अन्य वर्ण हैं, तो Chrome आपको एक त्रुटि संदेश दिखाएगा।

— js-coder

@dotweb - मैं आपकी बात देख रहा हूं। दोनों के बीच अंतर यह है कि संख्या विशेषता के साथ, सभी वर्णमाला वर्ण स्वचालित रूप से हटा दिए जाते हैं जब मैं इनपुट के लिए अचयनित (ट्रिगर धुंधला) करता हूं। पैटर्न विशेषता का उपयोग करते समय ऐसा नहीं होता है। मुझे लगता है कि यह अंतर केवल महत्वपूर्ण है यदि आप अपने डेटा को पोस्ट करने के लिए AJAX का उपयोग कर रहे हैं, और आप submitपोस्ट को ट्रिगर करने की तुलना में किसी अन्य घटना का उपयोग कर रहे हैं ।

— झट

यह वह नहीं करता है जो ओपी ने पूछा था। केवल पूर्णांक /\d*/.test(1.1) // true

— vsync

@vsync pattern="\d*"समान नहीं है /\d*/, pattern="\d*"के बराबर है /^(?:\d*)$/, कृपया HTML5 पैटर्न विशेषता प्रलेखन देखें ।

— विकटोरिया स्ट्राइब्यूव

Answer 3

<input type="text" name="Phone Number" pattern="[0-9]{10}" title="Phone number">

इस कोड का उपयोग करके, टेक्स्ट फ़ील्ड का इनपुट केवल अंकों को दर्ज करने के लिए सीमित करता है। पैटर्न HTML 5 में उपलब्ध नई विशेषता है।

पैटर्न विशेषता डॉक्टर

Comments

विनिर्देश के अनुसार पैटर्न विशेषता केवल उसी प्रकार उपयोग की जा सकती है जहां इनपुट प्रकार पाठ, खोज, URL, टेलीफोन, ई-मेल, पासवर्ड (जैसा कि "पाठ" प्रकार के साथ यहां दिखाया गया है)। इसका अर्थ है कि इस पद्धति का उपयोग करते समय संख्या इनपुट प्रकार के शब्दार्थ और इसलिए (महत्वपूर्ण रूप से) कुछ टैबलेट और फोन के संख्यात्मक ऑन-स्क्रीन कीबोर्ड खो जाते हैं।

— pwdst

फ़ायरफ़ॉक्स 36.0 पर यह आपको अक्षर और विशेष वर्ण टाइप करने की अनुमति देता है।

— मालवोस

यह केवल संख्याओं के लिए इनपुट को सीमित नहीं करता है, आप अभी भी पत्र टाइप कर सकते हैं!

— हदीदअली

Answer 4

जावास्क्रिप्ट का उपयोग करने का आसान तरीका:

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >

Comments

मुझे समझ नहीं आ रहा हैreplace(/(\..*)\./g, '$1')

— codyc4321

फ्लोट नंबरों को स्वीकार करना और .केवल एक बार दोहराना महत्वपूर्ण है , उदाहरण के 123.556लिए रिटेन किया जा सकता है।

— तारेक कालाजी

@TarekKalaji - प्रश्न पूर्णांक बताता है और फ्लोट संख्या

— vsync

मोबाइल डिवाइस के बारे में कैसे? क्योंकि टाइप टेक्स्ट सभी कीबोर्ड प्रदर्शित करता है (अल्फान्यूमेरिक वर्ण भी)

— Nuri YILMAZ

Answer 5

पैटर्न अच्छा है, लेकिन यदि आप इनपुट को केवल टाइप = "टेक्स्ट" के साथ संख्याओं तक सीमित रखना चाहते हैं, तो आप नीचे दिए गए अनुसार ओनिनपुट और एक रेगेक्स का उपयोग कर सकते हैं:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>

मैं मेरे लिए वार्क :)

Comments

सावधान रहें कि यह दृष्टिकोण आपके (परिवर्तन) विधि (ईवेंट हैंडलर) को नकार सकता है और इनपुट बॉक्स में आपके डिफ़ॉल्ट मान को मिटा भी सकता है।

— हदीदअली

Answer 6

यह न केवल html5 के लिए है, सभी ब्राउज़र ठीक काम कर रहे हैं। इसे इस्तेमाल करे

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"

Comments

ये गलत है। इनपुट प्रयास पर: Shift + Home, Shift + End, Ctrl + A, Ctrl + C, Ctrl + V। oninputइसके बजाय का उपयोग करें

— zanderwar

जब यह उत्तर लिखा गया था, HTML5 प्रकाशित नहीं हुआ था। @ जेंडरवार

— मुहम्मट

Answer 7

पैटर्न हमेशा प्रतिबंध के लिए बेहतर होते हैं , कोशिश करते हैं oninputऔर min1 के बाद से केवल संख्याओं को इनपुट करने के लिए 1 होते हैं

<input type="text" min="1" oninput="this.value=this.value.replace(/[^0-9]/g,'');"
                                value=${var} >

Comments

यह बहुत ही त्वरित समाधान है। `मान = $ {var}` के लिए क्या है?

— डेवलपर

उस इनपुट के लिए @AcademyofProgrammer उदाहरण डिफ़ॉल्ट मान

— Shinigamae

सबसे बढ़िया उत्तर! चिपकाने के लिए काम करता है, यहां तक ​​कि IE (10+) में भी काम करता है, आपको इनपुट के प्रकार के माध्यम से किसी भी कीबोर्ड को प्रदर्शित करने की स्वतंत्रता देता है, और क्षेत्र के अंदर इन pesky ऊपर / नीचे तीरों को क्रोम डिस्प्ले नहीं करता है।

— Janosch

Answer 8

क्या आपने stepइस तरह 1 को विशेषता सेट करने की कोशिश की है

<input type="number" step="1" /> 

Answer 9

शायद यह हर उपयोग के मामले में फिट नहीं है, लेकिन

<input type="range" min="0" max="10" />

एक अच्छा काम कर सकते हैं: बेला ।

प्रलेखन की जाँच करें ।

Answer 10

हाँ, HTML5 करता है। इस कोड को आज़माएं ( w3school ):

<!DOCTYPE html>
<html>
<body>

<form action="">
  Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5" />
  <input type="submit" />
</form>

</body>
</html>

मिनट और अधिकतम paremeter देखें? मैंने इसे क्रोम 19 (काम किया) और फ़ायरफ़ॉक्स 12 (काम नहीं किया) का उपयोग करके आज़माया।

Comments

यह मानता है कि आप एक ज्ञात सीमा चाहते हैं। लेकिन अगर आप कोई पूर्णांक मूल्य चाहते हैं, तो क्या यह अभी भी काम करेगा?

— रैंडमहैंडल

Answer 11

बस इसे अपने इनपुट फ़ील्ड में डालें: onkeypress='return event.charCode >= 48 && event.charCode <= 57'

Answer 12

मैं ओह क्रोम काम कर रहा था और इसमें कुछ समस्याएं थीं, भले ही मैं HTML विशेषताओं का उपयोग करता हूं मैं इस js कोड के साथ समाप्त हुआ

$("#element").on("input", function(){
        var value = $(this).val();

        $(this).val("");
        $(this).val(parseInt(value));

        return true;
});

Comments

मैंने 1 मामूली ट्वीक के साथ इसका उपयोग करना समाप्त कर दिया; मैंने parseInt (मान) को parseInt (value.replace ('।', '' ') में बदल दिया। इसने मुझे 1.56 को चिपकाने और प्रदर्शित मूल्य को 1 के बजाय 156 पर रखने की अनुमति दी।

— codecribblr

Answer 13

सेट करें step="any"। ठीक काम करता है। संदर्भ: http://blog.isotoma.com/2012/03/html5-input-typenumber-and-decimalsfloats-in-chrome/

Answer 14

ऐनक से

step="any"या पॉजिटिव फ्लोटिंग-पॉइंट संख्या
तत्व के मूल्य की वैल्यू ग्रैन्युलैरिटी को निर्दिष्ट करता है।

तो आप बस इसे सेट कर सकते हैं 1:

Comments

मैंने यह कोशिश की है, लेकिन समस्या यह है कि आप अभी भी टेक्स्ट बॉक्स में एक फ्लोटिंग पॉइंट नंबर टाइप कर सकते हैं।

— JayPea

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

— ब्लेज़मॉन्गर 18

Answer 15

stepकिसी भी फ्लोट नंबर की विशेषता सेट करें , जैसे 0.01 और आप जाने के लिए अच्छे हैं।

Answer 16

var valKeyDown;
var valKeyUp;


function integerOnly(e) {
    e = e || window.event;
    var code = e.which || e.keyCode;
    if (!e.ctrlKey) {
        var arrIntCodes1 = new Array(96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 8, 9, 116);   // 96 TO 105 - 0 TO 9 (Numpad)
        if (!e.shiftKey) {                          //48 to 57 - 0 to 9 
            arrIntCodes1.push(48);                  //These keys will be allowed only if shift key is NOT pressed
            arrIntCodes1.push(49);                  //Because, with shift key (48 to 57) events will print chars like @,#,$,%,^, etc.
            arrIntCodes1.push(50);
            arrIntCodes1.push(51);
            arrIntCodes1.push(52);
            arrIntCodes1.push(53);
            arrIntCodes1.push(54);
            arrIntCodes1.push(55);
            arrIntCodes1.push(56);
            arrIntCodes1.push(57);
        }
        var arrIntCodes2 = new Array(35, 36, 37, 38, 39, 40, 46);
        if ($.inArray(e.keyCode, arrIntCodes2) != -1) {
            arrIntCodes1.push(e.keyCode);
        }
        if ($.inArray(code, arrIntCodes1) == -1) {
            return false;
        }
    }
    return true;
}

$('.integerOnly').keydown(function (event) {
    valKeyDown = this.value;
    return integerOnly(event);
});

$('.integerOnly').keyup(function (event) {          //This is to protect if user copy-pastes some character value ,..
    valKeyUp = this.value;                          //In that case, pasted text is replaced with old value,
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {   //which is stored in 'valKeyDown' at keydown event.
        $(this).val(valKeyDown);                    //It is not possible to check this inside 'integerOnly' function as,
    }                                               //one cannot get the text printed by keydown event 
});                                                 //(that's why, this is checked on keyup)

$('.integerOnly').bind('input propertychange', function(e) {    //if user copy-pastes some character value using mouse
    valKeyUp = this.value;
    if (!new RegExp('^[0-9]*$').test(valKeyUp)) {
        $(this).val(valKeyDown);
    }
});

Answer 17

वर्तमान में, उपयोगकर्ता को केवल HTML के साथ अपने इनपुट में दशमलव मान लिखने से रोकना संभव नहीं है। आपको जावास्क्रिप्ट का उपयोग करना होगा।

Answer 18

<input type="number" oninput="this.value = Math.round(this.value);"/>

Answer 19

Future ™ में (देखें कि मैं उपयोग कर सकता हूं ), उन उपयोगकर्ता एजेंटों पर जो आपके लिए एक कीबोर्ड प्रस्तुत करते हैं, आप एक पाठ इनपुट को केवल संख्यात्मक के साथ प्रतिबंधित कर सकते हैं input[inputmode]।

Comments

inputmodeज्यादातर हाथ से पकड़े जाने वाले उपकरणों के लिए है और सही कीबोर्ड लेआउट को ट्रिगर करेगा, लेकिन कीबोर्ड के साथ "सामान्य" कंप्यूटरों के लिए, यह जो भी आप चाहते हैं उसे दर्ज करने से नहीं रोकेंगे।

— vsync