HTML पाठ इनपुट केवल संख्यात्मक इनपुट की अनुमति देता है

Question

क्या HTML पाठ इनपुट ( <input type=text />) को केवल संख्यात्मक कीस्ट्रोक्स (प्लस '।') की अनुमति देने का एक त्वरित तरीका है ?

Comments

यहां कई समाधान केवल तभी काम करते हैं जब कुंजियों को दबाया जाता है। यदि लोग मेनू का उपयोग करके पाठ पेस्ट करते हैं, या यदि वे पाठ इनपुट में पाठ को खींचते हैं और छोड़ते हैं तो ये विफल हो जाएंगे। मुझे इससे पहले काट लिया गया है। सावधान रहे!

— बेनेट मैकलेवे

@JuliusA - आप हमेशा हमेशा सर्वर साइड सत्यापन वैसे भी जरूरत है।

— स्टीफन पी

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'></input>

— दरोगाओं

@Droogans नोटिस है कि किसी अन्य कुंजी को भी निष्क्रिय कर देता है, जैसे कि TAB अगले इनपुट पर जाने के लिए या किसी भी अन्य शॉर्टकट सीधे इनपुट के साथ शामिल नहीं है जैसे कि इनपुट केंद्रित होने पर वेबसाइट ताज़ा करने के लिए।

— अलेजांद्रो पेरेज़

यदि आप प्लगइन के साथ ठीक हैं, तो NumericInput का उपयोग करें। डेमो: jsfiddle.net/152sumxu/2 अधिक जानकारी यहाँ stackoverflow.com/a/27561763/82961

— Faiz

Answer 1

^{नोट: यह एक अद्यतन उत्तर है। नीचे दी गई टिप्पणियाँ पुराने संस्करण का उल्लेख करती हैं, जिसमें कीकोड के साथ गड़बड़ होती है।}

जावास्क्रिप्ट

JSFiddle पर इसे स्वयं आज़माएं ।

आप <input>निम्न setInputFilterफ़ंक्शन के साथ किसी पाठ के इनपुट मानों को फ़िल्टर कर सकते हैं (कॉपी + पेस्ट, ड्रैग + ड्रॉप, कीबोर्ड शॉर्टकट, संदर्भ मेनू संचालन, गैर-टाइप करने योग्य कुंजी, कैरेट स्थिति, विभिन्न कीबोर्ड लेआउट और IE 9 के बाद से सभी ब्राउज़रों का समर्थन करता है ) :

// Restricts input for the given textbox to the given inputFilter function.
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      } else {
        this.value = "";
      }
    });
  });
}

अब आप setInputFilterइनपुट फ़िल्टर को स्थापित करने के लिए फ़ंक्शन का उपयोग कर सकते हैं :

setInputFilter(document.getElementById("myTextBox"), function(value) {
  return /^\d*\.?\d*$/.test(value); // Allow digits and '.' only, using a RegExp
});

अधिक इनपुट फ़िल्टर उदाहरणों के लिए JSField डेमो देखें । यह भी ध्यान दें कि आपको अभी भी सर्वर साइड सत्यापन करना होगा!

टाइपप्रति

यहाँ इसका एक टाइपस्क्रिप्ट संस्करण है।

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean): void {
    ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
        textbox.addEventListener(event, function(this: (HTMLInputElement | HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number | null, oldSelectionEnd: number | null}) {
            if (inputFilter(this.value)) {
                this.oldValue = this.value;
                this.oldSelectionStart = this.selectionStart;
                this.oldSelectionEnd = this.selectionEnd;
            } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {
                this.value = this.oldValue;
                if (this.oldSelectionStart !== null &&
                    this.oldSelectionEnd !== null) {
                    this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
                }
            } else {
                this.value = "";
            }
        });
    });
}

jQuery

इसका एक jQuery संस्करण भी है। इस जवाब को देखें ।

HTML 5

HTML 5 में एक देशी समाधान है <input type="number">( विनिर्देश देखें ), लेकिन ध्यान दें कि ब्राउज़र समर्थन भिन्न होता है:

• अधिकांश ब्राउज़र केवल फॉर्म सबमिट करते समय इनपुट को मान्य करेंगे, और टाइप करते समय नहीं।
• अधिकांश मोबाइल ब्राउज़रstep , minऔर maxविशेषताओं का समर्थन नहीं करते हैं ।
• Chrome (संस्करण 71.0.3578.98) अभी भी उपयोगकर्ता को वर्णों eऔर Eक्षेत्र में प्रवेश करने की अनुमति देता है । यह प्रश्न भी देखें ।
• फ़ायरफ़ॉक्स (संस्करण 64.0) और एज (EdgeHTML संस्करण 17.17134) अभी भी उपयोगकर्ता को फ़ील्ड में किसी भी पाठ को दर्ज करने की अनुमति देता है ।

W3schools.com पर इसे स्वयं आज़माएँ ।

Comments

हालांकि यह एक अच्छा विकल्प होगा, यह अभी भी /, कई डॉट्स, अन्य ऑपरेटरों आदि जैसे पात्रों को दर्ज करने की अनुमति देता है

— महेंद्र लिया

अभी भी फ़ायरफ़ॉक्स 21 द्वारा समर्थित नहीं है (मैं IE9 या पहले के संस्करण के बारे में भी बात नहीं करता ...)

— जेबीई

इनपुट प्रकार संख्या का उपयोग आपके इनपुट को केवल संख्या स्वीकार करने के लिए करने के लिए नहीं किया जाता है। यह उन इनपुटों के लिए है जो 'मदों की संख्या' निर्दिष्ट करते हैं। उदाहरण के लिए क्रोम एक की संख्या में कमी करने के लिए दो छोटे तीर जोड़ता है। एक उचित संख्या में केवल इनपुट HTML के लिए एक तरह से हास्यास्पद चूक है।

— इरविन

प्रकार = "संख्या" वास्तव में क्षेत्र में अमान्य पाठ दर्ज करने से नहीं रोकता है; प्रतीत होता है कि आप कचरे के डेटा को फ़ील्ड में भी काट और चिपका सकते हैं, यहां तक ​​कि क्रोम में भी।

— परफेक्शनिस्ट

केवल एक चीज जो मैं इसमें (e.keyCode == 65 && (e.ctrlKey === true || e.metaKey === true))

— जोड़ूंगा

Answer 2

इस DOM का उपयोग करें

<input type='text' onkeypress='validate(event)' />

और यह लिपि

function validate(evt) {
  var theEvent = evt || window.event;

  // Handle paste
  if (theEvent.type === 'paste') {
      key = event.clipboardData.getData('text/plain');
  } else {
  // Handle key press
      var key = theEvent.keyCode || theEvent.which;
      key = String.fromCharCode(key);
  }
  var regex = /[0-9]|\./;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Comments

जर्मन-सेटिंग्स एक ईपेक 900 पर। कुछ कुंजी के लिए अच्छी usabiliy काम नहीं करती है: - बैकस्पेस (कीकोड: 8) - नेविगेशन कुंजी बाईं और दाईं ओर (कीकोड: 37, 38) कॉपी और पेस्ट भी संभव है ...

— माइकल Piendl

ज्यादातर लोग ध्यान रखते हैं, स्क्रिप्ट त्रुटि दिखाने पर आपकी साइट पर खराब असर पड़ता है।

— रॉबर्ट जेपसेन

इस कोड के साथ कुछ समस्याएं। आप प्रवेश कर सकते हैं । एक से अधिक समय, दूसरा यह कुंजी को हटाने की अनुमति नहीं देता है, कोई समाधान?

— coure2011

मैंने बैकस्पेस, डिलीट और एरो काम नहीं करने की परवाह की। यदि आप "theEvent.keycode ||" को हटाते हैं, और जोड़ते हैं: "अगर (/ [~ ~] / &&! Regex.test (कुंजी)) {" तो यह बेहतर काम करता है (ASCII / UTF के लिए वैसे भी) || लेकिन तब यह चीनी पात्रों को अस्वीकार नहीं करेगा! :)

— सैम वाटकिंस

यह किसी को इनपुट में रैंडम सामान पेस्ट करने की अनुमति देता है

— Vitim.us

Answer 3

मैंने इसके अच्छे उत्तर के लिए लंबी और कठिन खोज की है, और हमें इसकी सख्त आवश्यकता है <input type="number", लेकिन इससे भी कम, ये 2 सबसे संक्षिप्त तरीके हैं जिनके साथ मैं आ सकता था:

<input type="text" 
       onkeyup="this.value=this.value.replace(/[^\d]/,'')">

यदि आप मिटाए जाने से पहले विभाजन के लिए दिखाए गए गैर-स्वीकृत चरित्र को नापसंद करते हैं, तो नीचे दी गई विधि मेरा समाधान है। कई अतिरिक्त स्थितियों पर ध्यान दें, यह सभी प्रकार के नेविगेशन और हॉटकी को अक्षम करने से बचने के लिए है। अगर किसी को पता है कि इसे कैसे छोटा करना है, तो हमें बताएं!

<input type="text" 
onkeydown="return ( event.ctrlKey || event.altKey 
                    || (47<event.keyCode && event.keyCode<58 && event.shiftKey==false) 
                    || (95<event.keyCode && event.keyCode<106)
                    || (event.keyCode==8) || (event.keyCode==9) 
                    || (event.keyCode>34 && event.keyCode<40) 
                    || (event.keyCode==46) )">

Comments

इनपुट टाइप = "नंबर" एचटीएमएल 5 में आ रहा है - और आप जावास्क्रिप्ट को फॉल-बैक पॉलिफ़िल के

— Fenton

अच्छी विधि लेकिन गैर-स्वीकार्य कुंजी दबाकर और दबाकर तोड़ी जा सकती है

— स्कॉट ब्राउन

रेगेक्स को बदलें /[^\d+]/और इसे नीचे रखने के साथ काम करता है

— बोकेओ

@boecko इसके लिए धन्यवाद, लेकिन ध्यान दें कि इसके /[^\d]+/बजाय होना चाहिए । अच्छा समाधान हालांकि। इसके अलावा @ user235859

— मॉसेलमैन

वह .भी अनुमति देना चाहता था । आपको वास्तव में इसे बनाना चाहिए/[^0-9.]/g

— Qsario

Answer 4

यहाँ एक सरल है जो ठीक एक दशमलव के लिए अनुमति देता है, लेकिन और नहीं:

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

Comments

हैंडल: कॉपी + पेस्ट, ड्रैग 'एन ड्रॉप, केवल 1 दशमलव, टैब, डिलीट, बैकस्पेस की अनुमति देता है - इस का उपयोग करें

— Mathemats

क्या ओनिनपुट के अंदर के इस तर्क को निकाला जा सकता है ताकि विश्व स्तर पर इसका इस्तेमाल किया जा सके?

— ईएमए

@ हेमा - हां, मेरे अन्य उत्तर यहां देखें जो दिखाता है कि आप कक्षा का उपयोग करके नियम कैसे लागू कर सकते हैं।

— बिलॉन्ह

यदि आप इसे कोणीय रूप में उपयोग करते हैं तो मूल्य नियंत्रण रूप में मान अद्यतन नहीं होगा।

— अले_इंफो

बहुत बढ़िया। मैंने इस घटना को इस.व्यू = this.value.replace (/ [^ ^ 0-9 .-] / g ',' ') .replace (/(\..*)\./ g,' $ 1 ') में बदल दिया। प्रतिस्थापित करें (/ ^ 0 + / g, '') .replace (/ (? <! ^) - / g, ''); इस तरह यह केवल शुरुआत में ही हैंडल करता है और नंबर की शुरुआत में 0 की अनुमति नहीं देता है।

— ब्रितानी

Answer 5

और एक और उदाहरण, जो मेरे लिए बहुत अच्छा काम करता है:

function validateNumber(event) {
    var key = window.event ? event.keyCode : event.which;
    if (event.keyCode === 8 || event.keyCode === 46) {
        return true;
    } else if ( key < 48 || key > 57 ) {
        return false;
    } else {
        return true;
    }
};

साथ ही कीपर ईवेंट से जुड़े

$(document).ready(function(){
    $('[id^=edit]').keypress(validateNumber);
});

और HTML:

<input type="input" id="edit1" value="0" size="5" maxlength="5" />

यहाँ एक jsFiddle उदाहरण है

Comments

चिपकाए गए पाठ के बारे में क्या?

— जेसन एबरसेन

जब मैं इस फ़ंक्शन को कॉल करता हूं तो मुझे "ईवेंट अपरिभाषित" क्यों मिलता है?

— विन्सेन्ट

यह फ़ायरफ़ॉक्स पर काम नहीं करता है जब event.keyCode को हमेशा वापस लौटाया जाता है। 0. मैंने नए कोड के साथ तय किया: फ़ंक्शन वैलिडेटनंबर (ईवेंट) {var key = event.which || Event.charCode || event.keyCode || 0; if (key == 8 || key == 46 || key == 37 || key == 39) {वापसी सच है? } और अगर (कुंजी <48 || कुंजी> 57) {गलत झूठ? } सच लौटना; };

— लुआन गुयेन

जैसा कि @ जेसिका ने कहा, आप एपोस्ट्रोफ और यहां तक ​​कि प्रतिशत संकेत जोड़ते हैं।

— अलेजांद्रो नावा

बहुत करीब! लेकिन एक से अधिक दशमलव की अनुमति देता है।

— क्रॉस

Answer 6

एचटीएमएल 5 है <input type=number>, जो आपके लिए सही लगता है। वर्तमान में, केवल ओपेरा ही इसे मूल रूप से समर्थन करता है, लेकिन एक परियोजना है जिसमें जावास्क्रिप्ट कार्यान्वयन है।

Comments

यहां एक दस्तावेज़ परिभाषित किया गया है कि कौन से ब्राउज़र इस विशेषता का समर्थन करते हैं: caniuse.com/input-number । इस के लेखन के रूप में, क्रोम और सफारी दोनों इस प्रकार के क्षेत्र का पूरी तरह से समर्थन करते हैं। IE 10 में आंशिक समर्थन है, और फ़ायरफ़ॉक्स का कोई समर्थन नहीं है।

— नाथन वालेस

एकमात्र समस्या type=numberयह है कि IE9 द्वारा समर्थित नहीं है

— J Rod

@JRod एक है polyfill पुराने IE के लिए। अधिक जानकारी यहाँ ।

— जकदेव

पहली समस्या चार type=numberको अनुमति दे रही है eक्योंकि यह e+10संख्या के रूप में विचार करता है। दूसरी समस्या यह है कि आप इनपुट में अधिकतम चार वर्णों को सीमित नहीं कर सकते।

— हकन फिएस्टीक

एक अन्य समस्या यह है कि यदि प्रकार संख्या है तो मुझे टाइप करने के लाभ नहीं मिल सकते हैं, उदाहरण के लिए: "tel"।

— स्कॉट्टीब्लाड्स

Answer 7

यहां अधिकांश उत्तर कुंजी-घटनाओं का उपयोग करने की कमजोरी है ।

कई उत्तर कीबोर्ड मैक्रोज़, कॉपी + पेस्ट और अधिक अवांछित व्यवहार के साथ पाठ चयन करने की आपकी क्षमता को सीमित कर देंगे, दूसरों को विशिष्ट jQuery प्लगइन्स पर निर्भर करते हैं, जो मक्खियों को मशीनगनों से मार रहा है।

यह सरल समाधान इनपुट क्रॉस मैकेनिज्म (कीस्ट्रोक, कॉपी + पेस्ट, राइटक्लिक कॉपी + पेस्ट, स्पीच-टू-टेक्स्ट आदि) की परवाह किए बिना मेरे लिए सबसे अच्छा काम करता है। सभी टेक्स्ट चयन कीबोर्ड मैक्रोज़ अभी भी काम करेंगे, और यह स्क्रिप्ट द्वारा गैर-संख्यात्मक मान सेट करने की क्षमता को भी सीमित करेगा।

function forceNumeric(){
    var $input = $(this);
    $input.val($input.val().replace(/[^\d]+/g,''));
}
$('body').on('propertychange input', 'input[type="number"]', forceNumeric);

Comments

jQuery 1.7+ की जरूरत है। यह एक अधिक पूर्ण उत्तर है क्योंकि यह "कॉपी" के माध्यम से खाता इनपुट में लेता है। और यह सरल भी है!

— 15

एक वैकल्पिक रेगेक्स: replace(/[^\d]+/g,'')सभी गैर-अंकों को खाली स्ट्रिंग के साथ बदलें। "I" (असंवेदनशील) संशोधक की आवश्यकता नहीं है।

— मेमोचिपन

यह शीर्ष पर होना चाहिए, क्योंकि एक टैग में "ऑनकी" ईवेंट हैंडलर को किसी भी तरह से प्रचारित नहीं किया जाना चाहिए ...

— gpinkas

यह निश्चित रूप से यहाँ सबसे अच्छा जवाब है, लेकिन यह दशमलव संख्याओं के साथ अंकों की अनुमति नहीं देता है। किसी भी विचार कैसे काम कर सकता है?

— अतृप

@Atirag अगर आप डेसीमल चाहते हैं तो आप regex को बदल सकते हैं/[^\d,.]+/

— EJTH

Answer 8

मैंने यहाँ वर्णित दो उत्तरों के संयोजन का उपयोग करने का विकल्प चुना

<input type="number" />

तथा

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    return !(charCode > 31 && (charCode < 48 || charCode > 57));
}

<input type="text" onkeypress="return isNumberKey(event);">

Comments

बहुत बढ़िया जवाब ... +1। आप निम्न कथन को भी कम कर सकते हैं: return !(charCode > 31 && (charCode < 48 || charCode > 57));

— schadeck

हालांकि हटाने के बारे में कैसे? आप संख्या चाहते हैं लेकिन आप शायद लोगों को पृष्ठ को ताज़ा किए बिना उन्हें सही करने में सक्षम होना चाहते हैं ...

— मार्टिन एरिक

Answer 9

HTML5 रीगेक्स का समर्थन करता है, इसलिए आप इसका उपयोग कर सकते हैं:

<input id="numbersOnly" pattern="[0-9.]+" type="text">

चेतावनी: कुछ ब्राउज़र अभी तक इसका समर्थन नहीं करते हैं।

Comments

HTML5 भी है <input type=number>।

— मैथियास ब्यनेंस

सच। आपको इसका जवाब देना चाहिए। Ooops, @ Ms2ger पहले से ही है।

— james.garriss 15

<इनपुट प्रकार = संख्या> कुछ ब्राउज़रों में वृद्धि और घटने के लिए तीर जोड़ता है, इसलिए यह एक अच्छा समाधान की तरह लगता है जब हम स्पिनर से बचना चाहते हैं

— Ayrad

पैटर्न केवल सबमिट पर जांचा जाता है। आप अभी भी पत्र दर्ज कर सकते हैं।

— इरविन

+पैटर्न विशेषता में साधन क्या है ?

— प्लैनेटहैकर्स

Answer 10

जावास्क्रिप्ट

function validateNumber(evt) {
    var e = evt || window.event;
    var key = e.keyCode || e.which;

    if (!e.shiftKey && !e.altKey && !e.ctrlKey &&
    // numbers   
    key >= 48 && key <= 57 ||
    // Numeric keypad
    key >= 96 && key <= 105 ||
    // Backspace and Tab and Enter
    key == 8 || key == 9 || key == 13 ||
    // Home and End
    key == 35 || key == 36 ||
    // left and right arrows
    key == 37 || key == 39 ||
    // Del and Ins
    key == 46 || key == 45) {
        // input is VALID
    }
    else {
        // input is INVALID
        e.returnValue = false;
        if (e.preventDefault) e.preventDefault();
    }
}

अतिरिक्त आप अल्पविराम, अवधि और ऋण (, -) जोड़ सकते हैं

  // comma, period and minus, . on keypad
  key == 190 || key == 188 || key == 109 || key == 110 ||

एचटीएमएल

<input type="text" onkeydown="validateNumber(event);"/ >

Comments

कीबोर्ड पर सही ढंग से काम नहीं करता है, जहां एक नंबर दर्ज करने के लिए शिफ्ट कुंजी का उपयोग करना पड़ता है (जैसे यूरोपीय AZERTY कीबोर्ड)।

— कप्तान संवेदनशील

धन्यवाद आदमी, तुम सच में एक सवाल समझते हो! अच्छा उदाहरण और ऑफ कोर्स हैंडलिंग। या, (जो अधिकांश लोग चाहते हैं कि अगर वे संख्याओं के साथ काम करें)

— real_yggdrasil

यह एकमात्र ऐसा काम है जो गैर-संख्यात्मक मानों को चिपकाने से रोकता है।

— DEREK LEE

Answer 11

बहुत आसन....

// एक जावास्क्रिप्ट फ़ंक्शन में (HTML या PHP का उपयोग कर सकते हैं)।

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

आपके फॉर्म इनपुट में:

<input type=text name=form_number size=20 maxlength=12 onkeypress='return isNumberKey(event)'>

इनपुट अधिकतम के साथ। (ये उपरोक्त 12 अंकों की संख्या के लिए अनुमति देता है)

Comments

ऐसा मत करो! यह सब कुछ, नंबरपैड, एरो कीज, डिलीट की, शॉर्टकट्स (CTRL + A, CTRL + R उदाहरण के लिए) को ब्लॉक कर देता है, यहां तक ​​कि TAB कुंजी भी यह असली है!

— कोरी

@ कोरी मैं पालन नहीं करता, क्या प्रोब्लेम लगता है? इसने मेरे मामले में ठीक काम किया।

— अनिरक्ष

पहली पंक्ति को बदलना होगा:var charCode = (evt.which) ? evt.which : evt.keyCode;

— peiman एफ।

Answer 12

2 समाधान:

प्रपत्र सत्यापनकर्ता का उपयोग करें (उदाहरण के लिए jQuery सत्यापन प्लगइन के साथ )

Onblur के दौरान एक जांच करें (यानी जब उपयोगकर्ता फ़ील्ड छोड़ता है) इनपुट फ़ील्ड की घटना, नियमित अभिव्यक्ति के साथ:

<script type="text/javascript">
function testField(field) {
    var regExpr = new RegExp("^\d*\.?\d*$");
    if (!regExpr.test(field.value)) {
      // Case of error
      field.value = "";
    }
}

</script>

<input type="text" ... onblur="testField(this);"/>

Comments

दिलचस्प बात यह है कि मुझे regex देना था "^ \\ d \\।? \\ d * $", लेकिन ऐसा इसलिए हो सकता है क्योंकि पेज एक XSLT ट्रांसफ़ॉर्म के माध्यम से चलाया जाता है।

— पॉल टॉम्बलिन

मुझे लगता है कि नियमित अभिव्यक्ति गलत है। मैंने इस लाइन का इस्तेमाल किया:var regExpr = /^\d+(\.\d*)?$/;

— कोस्टा

@ कॉस्टा को यकीन नहीं है, अगर उपयोगकर्ता उदाहरण के लिए .123(इसके बजाय 0.123) इनपुट करना चाहता है ?

— रोमेन लिंसोलास

@romaintaz। आप सही हैं, लेकिन फिर आपको यह सुनिश्चित करने के लिए नियमित अभिव्यक्ति को बदलना होगा कि यदि डॉट के सामने कोई अंक नहीं है, तो डॉट के बाद अंक हैं। कुछ इस तरह var regExpr = /^\d+(\.\d*)?$|^\.\d+$/;:।

— कोस्टा

Answer 13

एक सुरक्षित दृष्टिकोण कीज को हाईजैक करने के बजाय इनपुट के मूल्य की जांच कर रहा है और कीकोड को फ़िल्टर करने की कोशिश कर रहा है।

इस तरह से उपयोगकर्ता कीबोर्ड तीर, संशोधक कुंजियों, बैकस्पेस, डिलीट, नॉन स्टैंडर्ड की-बोर्ड का उपयोग, माउस का उपयोग पेस्ट करने, ड्रैग और ड्रॉप टेक्स्ट का उपयोग करने, यहां तक ​​कि एक्सेसिबिलिटी इनपुट का उपयोग करने के लिए स्वतंत्र है।

नीचे की स्क्रिप्ट सकारात्मक और नकारात्मक संख्याओं की अनुमति देती है

1
10
100.0
100.01
-1
-1.0
-10.00
1.0.0 //not allowed

var input = document.getElementById('number');
input.onkeyup = input.onchange = enforceFloat;

//enforce that only a float can be inputed
function enforceFloat() {
  var valid = /^\-?\d+\.\d*$|^\-?[\d]*$/;
  var number = /\-\d+\.\d*|\-[\d]*|[\d]+\.[\d]*|[\d]+/;
  if (!valid.test(this.value)) {
    var n = this.value.match(number);
    this.value = n ? n[0] : '';
  }
}

<input id="number" value="-3.1415" placeholder="Type a number" autofocus>

संपादित करें: मैंने अपना पुराना उत्तर हटा दिया क्योंकि मुझे लगता है कि यह अब प्राचीन है।

Comments

यह वास्तव में ज्यादातर मामलों को कवर करने के लिए लगता है

— जिया उल रहमान मुगल

Answer 14

आप इसके लिए पैटर्न का उपयोग कर सकते हैं:

<input id="numbers" pattern="[0-9.]+" type="number">

यहां आप संपूर्ण मोबाइल वेबसाइट इंटरफ़ेस युक्तियां देख सकते हैं ।

Comments

IE8 और 9 में काम नहीं करेगा । फिर भी एक अच्छा जवाब।

— aloisdg

आप त्रुटि प्रदर्शित करने के लिए एक शीर्षक = "केवल संख्या" भी जोड़ सकते हैं

— तूएलिहा

Answer 15

कृपया नीचे दिए गए समाधान का पता लगाएं। इस उपयोगकर्ता केवल दर्ज करने में सक्षम हो सकता है numericमूल्य, इसके अलावा उपयोगकर्ता के लिए सक्षम नहीं हो सकता है copy, paste, dragऔर dropइनपुट में।

चरित्रों की अनुमति है

0,1,2,3,4,5,6,7,8,9

घटनाओं के माध्यम से वर्ण और वर्ण की अनुमति नहीं है

• वर्णनात्मक मान
• विशेष वर्ण
• प्रतिलिपि
• पेस्ट करें
• खींचना
• ड्रॉप

$(document).ready(function() {
  $('#number').bind("cut copy paste drag drop", function(e) {
      e.preventDefault();
  });     
});
function isNumberKey(evt) {
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" class="form-control" name="number" id="number" onkeypress="return isNumberKey(event)" placeholder="Enter Numeric value only">

मुझे पता है अगर यह काम नहीं करता है।

Answer 16

यदि आप अल्फा या न्यूमेरिक के बीच डिवाइस (शायद एक मोबाइल फोन) का सुझाव देना चाहते हैं तो आप उपयोग कर सकते हैं <input type="number">।

Answer 17

एक और उदाहरण जहां आप इनपुट क्षेत्र में केवल संख्या जोड़ सकते हैं, अक्षर नहीं कर सकते

<input type="text" class="form-control" id="phone" name="phone" placeholder="PHONE" spellcheck="false" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">

Answer 18

JQuery और प्रतिस्थापन () को देखने की बजाय एक छोटा और मीठा कार्यान्वयन।

$('input.numeric').live('keyup', function(e) {
  $(this).val($(this).val().replace(/[^0-9]/g, ''));
});

केवल छोटे साइड इफेक्ट्स जो टाइप किए गए अक्षर पल-पल पर दिखाई देते हैं और CTRL / CMD + A थोड़ा अजीब व्यवहार करने लगता है।

Answer 19

input type="number" एक HTML5 विशेषता है।

अन्य मामले में यह आपकी मदद करेगा:

function isNumberKey(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57))
        return false;
    return true;
}

<input type="number" name="somecode" onkeypress="return isNumberKey(event)"/>

Comments

पहली पंक्ति को बदलना होगा:var charCode = (evt.which) ? evt.which : evt.keyCode;

— peiman एफ।

Answer 20

जावास्क्रिप्ट कोड:

function validate(evt)
{
    if(evt.keyCode!=8)
    {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        key = String.fromCharCode(key);
        var regex = /[0-9]|\./;
        if (!regex.test(key))
        {
            theEvent.returnValue = false;

            if (theEvent.preventDefault)
                theEvent.preventDefault();
            }
        }
    }

HTML कोड:

<input type='text' name='price' value='0' onkeypress='validate(event)'/>

पूरी तरह से काम करता है क्योंकि बैकस्पेस कीकोड 8 है और एक रेगेक्स एक्सप्रेशन इसकी अनुमति नहीं देता है, इसलिए यह बग को बायपास करने का एक आसान तरीका है :)

Answer 21

इस समस्या को हल करने का एक आसान तरीका उदाहरण के लिए पाठ में टाइप किए गए चार्टेटर्स को regex के साथ मान्य करने के लिए एक jQuery फ़ंक्शन को लागू करना है:

आपका html कोड:

<input class="integerInput" type="text">

और js jQuery का उपयोग करके कार्य करता है

$(function() {
    $('.integerInput').on('input', function() {
      this.value = this.value
        .replace(/[^\d]/g, '');// numbers and decimals only

    });
});

$(function() {
        $('.integerInput').on('input', function() {
          this.value = this.value
            .replace(/[^\d]/g, '');// numbers and decimals only
            
        });
    });

<script
			  src="https://code.jquery.com/jquery-2.2.4.min.js"
			  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
			  crossorigin="anonymous">
</script>

<input type="text" class="integerInput"/>


		

Answer 22

JQuery का उपयोग करने के साथ बस एक अन्य संस्करण

$(".numeric").keypress(function() {
    return (/\d/.test(String.fromCharCode(event.which) ))
});

Answer 23

अभी अधिकांश ब्राउज़रों में सहायक इस प्रकार = "संख्या" का उपयोग करें

<input type="number" maxlength="3" ng-bind="first">

Comments

मैं डेटा की जाँच नहीं है --1(1 से पहले 2 शून्य वर्ण)।

— Ngoc Nam

Answer 24

आप इनपुट मान की तुलना भी कर सकते हैं (जिसे डिफ़ॉल्ट रूप से स्ट्रिंग के रूप में माना जाता है) खुद को संख्यात्मक के रूप में मजबूर करने के लिए, जैसे:

if(event.target.value == event.target.value * 1) {
    // returns true if input value is numeric string
}

हालाँकि, आप की जरूरत है कि कीप आदि की तरह।

Answer 25

<input name="amount" type="text" value="Only number in here"/> 

<script>
    $('input[name=amount]').keyup(function(){
        $(this).val($(this).val().replace(/[^\d]/,''));
    });
</script>

Answer 26

मैंने कुछ शानदार जवाब देखे लेकिन मैं उन्हें जितना छोटा और जितना संभव हो उतना सरल लगता हूं, इसलिए शायद किसी को इससे फायदा होगा। मैं इस तरह जावास्क्रिप्ट Number()और isNaNकार्यक्षमता का उपयोग करेगा :

if(isNaN(Number(str))) {
   // ... Exception it is NOT a number
} else {
   // ... Do something you have a number
}

उम्मीद है की यह मदद करेगा।

Comments

मुझे यह पसंद है! इस तरह के एक सुरुचिपूर्ण समाधान, कोई रेगेक्स शामिल नहीं है।

— लेवी रॉबर्ट्स

यह सवाल का जवाब नहीं है, ओपी ने केवल एक इनपुट पर पाठ की अनुमति देने के लिए कहा, बाद में सत्यापित नहीं किया।

— टिम्बरमैन

हाँ, यह सच है! लेकिन पहले से ही एक स्वीकृत जवाब है जो मुझे लगता है कि अच्छा है, लेकिन मुझे लगा कि इससे किसी को मदद मिल सकती है, साथ ही यह अच्छा और साफ है।

— सिचा

Answer 27

इस DOM का उपयोग करें:

<input type = "text" onkeydown = "validate(event)"/>

और यह स्क्रिप्ट:

validate = function(evt)
{
    if ([8, 46, 37, 39, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 35, 36].indexOf(evt.keyCode || evt.which) == -1)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

... या इस लिपि को, बिना indexOf के, दो के उपयोग से for...

validate = function(evt)
{
    var CharValidate = new Array("08", "046", "039", "948", "235");
    var number_pressed = false;
    for (i = 0; i < 5; i++)
    {
        for (Ncount = 0; Ncount < parseInt(CharValidate[i].substring(0, 1)) + 1; Ncount++)
        {
            if ((evt.keyCode || evt.which) == parseInt(CharValidate[i].substring(1, CharValidate[i].lenght)) + Ncount)
            {
                number_pressed = true;
            }
        }
    }
    if (number_pressed == false)
    {
        evt.returnValue = false;
        if(evt.preventDefault){evt.preventDefault();}
    }
}

मैंने onkeypress के बजाय onkeydown विशेषता का उपयोग किया है, क्योंकि onkeypress विशेषता से पहले onkeydown विशेषता की जांच की जाती है। समस्या Google Chrome ब्राउज़र में होगी।

"Onkeypress" की विशेषता के साथ, TAB Google क्रोम पर "preventDefault" के साथ बेकाबू होगा, हालांकि, "onkeydown" की विशेषता के साथ, TAB नियंत्रणीय हो जाता है!

TAB => 9 के लिए ASCII कोड

पहली स्क्रिप्ट में दूसरे की तुलना में कम कोड है, हालांकि, ASCII वर्णों की सरणी में सभी कुंजी होनी चाहिए।

दूसरी स्क्रिप्ट पहले की तुलना में बहुत बड़ी है, लेकिन सरणी को सभी कुंजियों की आवश्यकता नहीं है। सरणी की प्रत्येक स्थिति में पहला अंक प्रत्येक स्थिति को पढ़ा जाएगा की संख्या है। प्रत्येक पढ़ने के लिए, अगले एक के लिए 1 वेतन वृद्धि होगी। उदाहरण के लिए:




NCount = 0

48 + NCount = 48

NCount + +

48 + NCount = 49

NCount + +

...

48 + NCount = 57




संख्यात्मक कुंजियों के मामले में केवल 10 (0 - 9) हैं, लेकिन यदि वे 1 मिलियन थे, तो इन सभी कुंजियों के साथ एक सरणी बनाने का कोई मतलब नहीं होगा।

ASCII कोड:

• 8 ==> (बैकस्पेस);
• 46 => (हटाएं);
• 37 => (बाएं तीर);
• 39 => (दायां तीर);
• 48 - 57 => (संख्या);
• 36 => (घर);
• 35 => (अंत);

Answer 28

यह एक बेहतर कार्य है:

function validateNumber(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  if ((key < 48 || key > 57) && !(key == 8 || key == 9 || key == 13 || key == 37 || key == 39 || key == 46) ){
    theEvent.returnValue = false;
    if (theEvent.preventDefault) theEvent.preventDefault();
  }
}

Answer 29

सबसे अच्छा तरीका है (सभी प्रकार की संख्याओं की अनुमति दें - वास्तविक नकारात्मक, वास्तविक सकारात्मक, आईनेगर नकारात्मक, पूर्णांक सकारात्मक):

$(input).keypress(function (evt){
    var theEvent = evt || window.event;
    var key = theEvent.keyCode || theEvent.which;
    key = String.fromCharCode( key );
    var regex = /[-\d\.]/; // dowolna liczba (+- ,.) :)
    var objRegex = /^-?\d*[\.]?\d*$/;
    var val = $(evt.target).val();
    if(!regex.test(key) || !objRegex.test(val+key) || 
            !theEvent.keyCode == 46 || !theEvent.keyCode == 8) {
        theEvent.returnValue = false;
        if(theEvent.preventDefault) theEvent.preventDefault();
    };
}); 

Answer 30

यह जियोवा 4 के समाधान का विस्तारित संस्करण है । समर्थन करता है minऔर maxविशेषताएँ। यदि संख्या सीमा से बाहर है, तो पिछला मान दिखाया जाएगा।

आप इसे यहाँ परीक्षण कर सकते हैं।

उपयोग: <input type=text class='number' maxlength=3 min=1 max=500>

function number(e) {
var theEvent = e || window.event;
var key = theEvent.keyCode || theEvent.which;
if(key!=13&&key!=9){//allow enter and tab
  key = String.fromCharCode( key );
  var regex = /[0-9]|\./;
  if( !regex.test(key)) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
    }   
  }
}

$(document).ready(function(){
    $("input[type=text]").filter(".number,.NUMBER").on({
        "focus":function(e){
         $(e.target).data('oldValue',$(e.target).val());
            },
        "keypress":function(e){
                e.target.oldvalue = e.target.value;
                number(e);
            },
        "change":function(e){
            var t = e.target;
            var min = $(t).attr("min");
            var max = $(t).attr("max");
            var val = parseInt($(t).val(),10);          
            if( val<min || max<val)
                {
                    alert("Error!");
                    $(t).val($(t).data('oldValue'));
                }

            }       
    });     
});

यदि इनपुट गतिशील हैं तो इसका उपयोग करें:

$(document).ready(function(){
    $("body").on("focus","input[type=text].number,.NUMBER",function(e){
        $(e.target).data('oldValue',$(e.target).val());
    }); 
    $("body").on("keypress","input[type=text].number,.NUMBER",function(e){
        e.target.oldvalue = e.target.value;
        number(e);
    }); 
    $("body").on("change","input[type=text].number,.NUMBER",function(e){
        var t = e.target
        var min = $(t).attr("min");
        var max = $(t).attr("max");
        var val = parseInt($(t).val());         
        if( val<min || max<val)
            {
                alert("Error!");
                $(t).val($(t).data('oldValue'));
            }
    }); 
});

Comments

@ उपयोगकर्ता इसे कुछ भी नहीं हटाना चाहिए।