HTML इनपुट टैग को केवल संख्यात्मक मान स्वीकार कैसे करें?

143

मुझे यह सुनिश्चित करने की आवश्यकता है कि एक निश्चित <input> क्षेत्र केवल संख्या को मूल्य के रूप में लेता है। इनपुट एक फॉर्म का हिस्सा नहीं है। इसलिए यह जमा नहीं होता है, इसलिए प्रस्तुत करने के दौरान मान्य करना एक विकल्प नहीं है। मैं चाहता हूं कि उपयोगकर्ता संख्याओं के अलावा किसी भी वर्ण में टाइप करने में असमर्थ हों।

क्या इसे प्राप्त करने का एक साफ तरीका है?

— चायल दस ब्रिंक
स्रोत

stackoverflow.com/questions/469357/…

— एलेक्सब्लम

2

इस [लिंक] [1] पर एक नज़र डालें, जिसमें पर्याप्त जानकारी है। [1]: stackoverflow.com/questions/469357/...

— महेशकुमार

यह भी काम आ सकता है: stackoverflow.com/questions/995183/…

— Chiel दस Brinke

HTML पाठ इनपुट के

— emkey08

282

HTML 5

आप केवल नंबर प्रविष्टियों को प्रतिबंधित करने के लिए HTML5 इनपुट प्रकार संख्या का उपयोग कर सकते हैं :

<input type="number" name="someid" />

यह केवल HTML5 शिकायत ब्राउज़र में काम करेगा। सुनिश्चित करें कि आपके HTML दस्तावेज़ का सिद्धांत है:

<!DOCTYPE html>

पुराने ब्राउज़र में पारदर्शी समर्थन के लिए https://github.com/jonstipe/number-polyfill भी देखें ।

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

अपडेट: इसके लिए एक नया और बहुत सरल उपाय है:

यह आपको पाठ पर किसी भी प्रकार के इनपुट फिल्टर का उपयोग करने की अनुमति देता है <input>, जिसमें विभिन्न संख्यात्मक फिल्टर भी शामिल हैं। यह कॉपी + पेस्ट, ड्रैग + ड्रॉप, कीबोर्ड शॉर्टकट, संदर्भ मेनू संचालन, गैर-टाइप करने योग्य कुंजी और सभी कीबोर्ड लेआउट को सही ढंग से संभाल लेगा।

इस उत्तर को देखें या इसे JSFiddle पर स्वयं आज़माएं ।

सामान्य प्रयोजन के लिए, आपके पास नीचे जेएस सत्यापन हो सकता है:

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

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

यदि आप दशमलव को "यदि स्थिति" इसके साथ बदलना चाहते हैं:

if (charCode > 31 && (charCode != 46 &&(charCode < 48 || charCode > 57)))

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

JSFiddle डेमो: http://jsfiddle.net/viralpatel/nSjy7/

— वायरल पटेल
स्रोत

6

हां, यह मेरे लिए फ़ायरफ़ॉक्स और क्रोम दोनों में काम करता है। अजीब है कि जे एस इतनी आसान चीज के लिए आवश्यक है।

— चील टेन ब्रिंच

7

क्रोम 30 में काम नहीं करता। मुझे फिडल में आपके "नंबर" इनपुट में सभी टाइपिंग अक्षरों में कोई परेशानी नहीं है। हम्मम ...

— बेन

2

क्या होगा अगर कोई फ्लोट वैल्यू को 8.9 की तरह दर्ज करना चाहता है?

— syed shah

6

अधिक मजबूत समाधान के लिए, इस बात पर भी विचार करें कि कॉपी और पेस्ट इस उदाहरण में क्या अक्षर जोड़ सकते हैं!

— नील

3

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

— peiman एफ।

33

आप HTML5 में पैटर्न विशेषता का भी उपयोग कर सकते हैं:

<input type="text" name="name" pattern="[0-9]" title="Title" />

इनपुट सत्यापन ट्यूटोरियल

हालाँकि, यदि आपका सिद्धांत नहीं है, htmlतो मुझे लगता है कि आपको कुछ जावास्क्रिप्ट / jquery का उपयोग करने की आवश्यकता होगी।

— martincarlin87
स्रोत

3

हालाँकि फ़ायरफ़ॉक्स इनपुट बॉक्स को एक लाल बॉर्डर देता है जब गैर-संख्याएँ टाइप की जाती हैं, फ़ायरफ़ॉक्स और क्रोम दोनों में, आप इनपुट बॉक्स में गैर-संख्या वर्ण टाइप करने में सक्षम होते हैं।

— चिले दस ब्रिंच

आप अपने पृष्ठ पर किस सिद्धांत का उपयोग कर रहे हैं?

— martincarlin87

ठीक है, शायद यह आपके पास मौजूद ब्राउज़र संस्करणों में समर्थित नहीं है? 100% यकीन नहीं है, लेकिन ईमानदार होने के लिए मैं कुछ js का उपयोग करने के लिए भी मान्य करूँगा, मैं इस समय html5 पर पूरी तरह भरोसा नहीं

— करूंगा

7

संपत्ति आपको नंबर दर्ज करने देती है लेकिन फॉर्म जमा नहीं करती है।

— My1

1

केवल मान्यता सत्यापन!

— एरिक होडोंस्की

16

त्वरित और आसान कोड

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" />

यह केवल संख्या और बैकस्पेस के उपयोग की अनुमति देगा।

यदि आपको दशमलव भाग भी चाहिए, तो इस कोड के टुकड़े का उपयोग करें

<input type="text" onkeypress="return (event.charCode !=8 && event.charCode ==0 || ( event.charCode == 46 || (event.charCode >= 48 && event.charCode <= 57)))" />

— abhijithvijayan
स्रोत

13

कृपया इस कोड को इनपुट फ़ील्ड के साथ ही आज़माएँ

<input type="text" name="price" id="price_per_ticket" class="calculator-input" onkeypress="return event.charCode >= 48 && event.charCode <= 57"></div>

यह ठीक काम करेगा।

— उपिन्दास दोपहर
स्रोत

फिर बैकस्पेस कैसे हटाएं?

— 6by3

7

आप एक का उपयोग कर सकते हैं <input type="number" />। यह केवल संख्या को othe इनपुट बॉक्स में दर्ज करने की अनुमति देगा।

उदाहरण: http://jsfiddle.net/SPqY3/

कृपया ध्यान दें कि इनपुट type="number"टैग केवल नए ब्राउज़रों में समर्थित है।

फ़ायरफ़ॉक्स के लिए, आप जावास्क्रिप्ट का उपयोग करके इनपुट को मान्य कर सकते हैं:

http://jsfiddle.net/VmtF5/

अपडेट 2018-03-12: ब्राउज़र समर्थन बहुत बेहतर है अब यह निम्नलिखित द्वारा समर्थित है:

क्रोम 6+
फ़ायरफ़ॉक्स 29+
ओपेरा 10.1+
सफारी 5+
धार
(इंटरनेट एक्सप्लोरर 10+)

— starbeamrainbowlabs
स्रोत

1

यह क्रोम में बहुत अच्छी तरह से काम करता प्रतीत होता है, लेकिन फ़ायरफ़ॉक्स में नहीं।

— चिले दस ब्रिंक

आह। ऐसा इसलिए है क्योंकि फ़ायरफ़ॉक्स इनपुट प्रकार = संख्या का समर्थन नहीं करता है। वैकल्पिक रूप से, आप इनपुट को मान्य करने के लिए कुछ जावास्क्रिप्ट का उपयोग कर सकते हैं क्योंकि उपयोगकर्ता पाठ को इनपुट करता है। उत्तर अपडेट किया गया।

— स्टारबिम्रेनबोलाब्स

Jsfiddle.net/VmtF5 पर jscript भी काम नहीं करेगी। यहां तक कि अगर 1 अंक चरित्र की शुरुआत में है, तो सत्यापन विफल हो जाता है। इसे स्वयं आज़माएं jsfiddle

— अक्षय

@aarn यह मेरे लिए काम करता है ( i.imgur.com/AWdmEov.png देखें ), आप किस ब्राउज़र का उपयोग कर रहे हैं?

— स्टारबिम्रेनबोलाब्स

@starbeamrainbowlabs मैं फ़ायरफ़ॉक्स का उपयोग कर रहा हूँ। इसके अलावा, 6abc दर्ज करें, यह आपको त्रुटि नहीं दिखाएगा

— अक्षय

5

<input type="text" name="myinput" id="myinput" onkeypress="return isNumber(event);" />

और js में:

function isNumber(e){
    e = e || window.event;
    var charCode = e.which ? e.which : e.keyCode;
    return /\d/.test(String.fromCharCode(charCode));
}

या आप इसे एक जटिल बू उपयोगी तरीके से लिख सकते हैं:

<input onkeypress="return /\d/.test(String.fromCharCode(((event||window.event).which||(event||window.event).which)));" type="text" name="myinput" id="myinput" />

नोट : क्रॉस-ब्राउजर और रेगेक्स इन शाब्दिक।

— फ्रेड्रिक गॉस
स्रोत

आप .5 या .3 जैसे इनपुट डालने की क्षमता कैसे जोड़ेंगे?

— user3591637

फिर आपको पहले और दूसरे पात्रों ( 0.43या .43) पर विचार करना होगा जो वर्तमान इनपुट प्लस दबाए गए कुंजी के मूल्य की जांच के साथ किया जा सकता है। यह एक-पंक्ति कोड में बदसूरत होगा, मैं इसके लिए एक फ़ंक्शन का उपयोग करने की सलाह देता हूं। पूर्णांक या फ्लोट का परीक्षण करने के लिए, यहां देखें ।

— फ्रेडरिक गॉस

1

आप गलती से दर्ज किए गए नंबर को हटा नहीं सकते

— क्रिस सिम

5

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

var userName = document.querySelector('#numberField');

userName.addEventListener('input', restrictNumber);
function restrictNumber (e) {  
  var newValue = this.value.replace(new RegExp(/[^\d]/,'ig'), "");
  this.value = newValue;
}

<input type="text" id="numberField">

स्निपेट का विस्तार करें

— Shaktish
स्रोत

1

इसलिए मुझे रेगेक्स बहुत पसंद है। धन्यवाद, यार, तुमने सचमुच मेरा दिन बचा लिया

— निर्मल

4

<input 
    onkeyup="value=isNaN(parseFloat(value))?1000:value" 
       type="number" 
      value="1000"
>

onkeyup ट्रिगर जब कुंजी जारी किया जाता है।

isNaN(parseFloat(value))? जाँचता है कि इनपुट मान एक संख्या नहीं है।

यदि यह संख्या नहीं है तो मान 1000 पर सेट है। :यदि यह संख्या है तो मान मान पर सेट है।

नोट: किसी कारण से यह केवल साथ काम करता हैtype="number"

इसे और अधिक रोमांचक बनाने के लिए, आप एक सीमा भी रख सकते हैं:

<input 
    onkeyup="value=isNaN(parseFloat(value))||value<0||value>9000?1000:value"
       type="number"
      value="1000"
>

का आनंद लें!

— user40521
स्रोत

4

मैं एक बिट के लिए इस एक के साथ लड़े। यहां और अन्य कई समाधान जटिल लग रहे थे। यह समाधान HTML के साथ jQuery / जावास्क्रिप्ट का उपयोग करता है ।

    <input type="number" min="1" class="validateNumber">

    $(document).on('change', '.validateNumber', function() { 
        var abc = parseInt($(this).val());
        if(isNaN(abc)) { abc = 1; }
        $(this).val(abc);
    });

मेरे मामले में मैं 1 के न्यूनतम मान के साथ छोटी मात्रा पर नज़र रख रहा था, इसलिए इनपुट टैग में न्यूनतम = "1" और isNaN () चेक में abc = 1 है। सकारात्मक संख्याओं के लिए आप उन मानों को 0 में बदल सकते हैं और यहां तक कि ऋणात्मक संख्याओं के लिए अनुमति देने के लिए इनपुट टैग से केवल मिन = "1" हटा सकते हैं।

इसके अलावा यह कई बक्से के लिए काम करता है (और आपको आईडी द्वारा उन्हें व्यक्तिगत रूप से करने पर कुछ लोड समय बचा सकता है), बस "वैलिनेटनंबर" वर्ग को जोड़ें जहां आवश्यक हो।

व्याख्या

parseInt () मूल रूप से आपको क्या चाहिए, सिवाय इसके कि यह कुछ पूर्णांक मान के बजाय NaN लौटाता है। एक साधारण अगर () में आप "फॉलबैक" मान सेट कर सकते हैं जिसे आप उन सभी मामलों में पसंद करते हैं जिन्हें NaN लौटाया जाता है :-)। इसके अलावा W3 यहाँ कहता है कि NaN का वैश्विक संस्करण जाँच करने से पहले टाइप करेगा जो कुछ अतिरिक्त अशुद्धि देता है (Number.isNaN () ऐसा नहीं करता है)। सर्वर / बैकएंड पर भेजे गए किसी भी मान को अभी भी वहाँ मान्य किया जाना चाहिए!

— यशायाह
स्रोत

4

function AllowOnlyNumbers(e) {

e = (e) ? e : window.event;
var clipboardData = e.clipboardData ? e.clipboardData : window.clipboardData;
var key = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
var str = (e.type && e.type == "paste") ? clipboardData.getData('Text') : String.fromCharCode(key);

return (/^\d+$/.test(str));
}

<h1>Integer Textbox</h1>
    <input type="text" autocomplete="off" id="txtIdNum" onkeypress="return AllowOnlyNumbers(event);" />

स्निपेट का विस्तार करें

JSFiddle: https://jsfiddle.net/ug8pvysc/

— समीह सईद
स्रोत

1

जब यू टेक्स्ट वाले मान को चिपकाता है, तो वह इसे अनुमति देता है

— क्रिस सिम

1

यह विशेष पात्रों को भी अनुमति देता है। उदाहरण के लिए: á, ã, ê, ó, è, आदि

— लगभग

3

यदि आप एचटीएमएल 5 का उपयोग कर सकते हैं, तो आप कर सकते हैं <input type="number" /> यदि नहीं तो आपको इसे जावास्क्रिप्ट के माध्यम से करना होगा क्योंकि आपने कहा था कि यह कोडबेहिन्द से इसे करने के लिए प्रस्तुत नहीं है।

<input id="numbersOnly" onkeypress='validate()' />

function validate(){
  var returnString;
  var text = document.getElementByID('numbersOnly').value;
  var regex = /[0-9]|\./;
  var anArray = text.split('');
  for(var i=0; i<anArray.length; i++){
   if(!regex.test(anArray[i]))
   {
     anArray[i] = '';
   }
  }
  for(var i=0; i<anArray.length; i++) {
    returnString += anArray[i];
  }
  document.getElementByID('numbersOnly').value = returnString;
}

PS फ्लॉप कोड का परीक्षण करता है, लेकिन टाइपोस की जांच न करने पर यह कम या ज्यादा सही होना चाहिए: D आप कुछ और चीजें जोड़ना चाह सकते हैं जैसे कि क्या करना है अगर स्ट्रिंग शून्य या खाली है आदि। आप भी इसे जल्दी बना सकते हैं: D

— czioutas
स्रोत

2

कैसे उपयोग के बारे में <input type="number"...>?

http://www.w3schools.com/tags/tag_input.asp

इसके अलावा, यहां एक सवाल है कि सत्यापन के लिए जावास्क्रिप्ट का उपयोग करने के कुछ उदाहरण हैं ।

अपडेट: बेहतर प्रश्न से जुड़ा (धन्यवाद एलेक्सब्लम)।

— dan1111
स्रोत

2

यदि पूर्णांक सेट नहीं है 0

<input type="text" id="min-value" />

$('#min-value').change(function ()
            {   
                var checkvalue = $('#min-value').val();
                if (checkvalue != parseInt(checkvalue))
                    $('#min-value').val(0);
            });

— websky
स्रोत

2

स्वीकृत उत्तर:

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

यह अच्छा है, लेकिन सही नहीं है। यह मेरे लिए काम करता है, लेकिन मुझे चेतावनी मिलती है कि अगर बयान को सरल बनाया जा सकता है।

तब यह इस तरह दिखता है, जो कि पहले से ही है:

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

मूल पोस्ट पर टिप्पणी करेंगे, लेकिन ऐसा करने के लिए मेरी प्रतिष्ठा बहुत कम है (बस इस खाते को बनाया गया है)।

— क्रिस एच।
स्रोत

2

आप <input>टैग का उपयोग विशेषता प्रकार = 'संख्या' के साथ कर सकते हैं ।

उदाहरण के लिए आप उपयोग कर सकते हैं <input type='number' />

यह इनपुट फ़ील्ड केवल संख्यात्मक मानों की अनुमति देता है। आप न्यूनतम मान और अधिकतम मान भी निर्दिष्ट कर सकते हैं जिसे इस क्षेत्र द्वारा स्वीकार किया जाना चाहिए।

— गीथ चांडालवाड़ा
स्रोत

2

कृपया जावास्क्रिप्ट भाषा का उपयोग करते हुए अपने वेब पेज पर पाठ इनपुट तत्व के मूल्य के क्रॉस-ब्राउज़र फ़िल्टर का मेरा प्रोजेक्ट देखें: इनपुट कुंजी फ़िल्टर । आप मान को पूर्णांक संख्या, फ्लोट संख्या के रूप में फ़िल्टर कर सकते हैं या कस्टम फ़िल्टर लिख सकते हैं, जैसे फ़ोन नंबर फ़िल्टर। एक पूर्णांक संख्या इनपुट कोड का एक उदाहरण देखें:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Integer field</h1>
<input id="Integer">
<script>
	CreateIntFilter("Integer", function(event){//onChange event
			inputKeyFilter.RemoveMyTooltip();
			var elementNewInteger = document.getElementById("NewInteger");
			var integer = parseInt(this.value);
			if(inputKeyFilter.isNaN(integer, this)){
				elementNewInteger.innerHTML = "";
				return;
			}
			//elementNewInteger.innerText = integer;//Uncompatible with FireFox
			elementNewInteger.innerHTML = integer;
		}
		
		//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
		, function(event){ inputKeyFilter.isNaN(parseInt(this.value), this); }
	);
</script>
 New integer: <span id="NewInteger"></span>
</body>
</html>

स्निपेट का विस्तार करें

इनपुट कुंजी फ़िल्टर के उदाहरण में मेरा पृष्ठ "इंटेगर फ़ील्ड:" भी देखें

— Andrej
स्रोत

2

सामान्य प्रयोजन के लिए, आपके पास नीचे जेएस सत्यापन हो सकता है:

यह न्यूमेरिक कीपैड और सामान्य नंबर की के लिए काम करेगा

function isNumberKey(evt){
        var charCode = (evt.which) ? evt.which : event.keyCode

if (charCode < 31 || (charCode >= 48 && charCode <= 57 ) || (charCode >= 96 && charCode <= 105 ))
        return true;
    return false;
}

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

— YasirPoongadan
स्रोत

2

अपने इनपुट टैग के अंदर जोड़ें: onkeyup = "value = value.replace (([^ \ d] / g, '')"

— नवीन कुमार
स्रोत

2

एसओ में आपका स्वागत है! दुर्भाग्य से, यह एक 5 1/2 वर्ष पुराना प्रश्न है जिसका पहले से ही एक स्वीकृत उत्तर है। आप यहां सवालों के जवाब के बिना ब्राउज़ करना चाहते हैं: stackoverflow.com/unanswered

— AndroidNoobie

2

मैंने निम्नलिखित जोड़ने के लिए कुछ उत्तर अपडेट किए:

एक्सटेंशन विधि के रूप में विधि जोड़ें
केवल एक बिंदु दर्ज करने की अनुमति दें

दशमलव बिंदु की अनुमति के बाद कितनी संख्या निर्दिष्ट करें।

String.prototype.isDecimal = function isDecimal(evt,decimalPts) {
    debugger;
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode != 46 && (charCode < 48 || charCode > 57)))
        return false;

    //Prevent more than one point
    if (charCode == 46 && this.includes("."))
        return false;

    // Restrict the needed decimal digits
    if (this.includes("."))
    {
        var number = [];
        number = this.split(".");
        if (number[1].length == decimalPts)
             return false;
     }

     return true;
};

— प्लेक्सिस प्लेक्सिस
स्रोत

1

मैं यह ज़िप कोड के लिए उपयोग करता हूं, त्वरित और आसान।

<input type="text" id="zip_code" name="zip_code" onkeypress="return event.charCode > 47 && event.charCode < 58;" pattern="[0-9]{5}" required></input>

— जस्टिन बुशर
स्रोत

1

इस कोड का उपयोग करते समय आप मोज़िला फ़ायरफ़ॉक्स में "बैकस्पेस बटन" का उपयोग नहीं कर सकते, आप केवल क्रोम 47 && event.charCode <58 में बैकस्पेस का उपयोग कर सकते हैं? "पैटर्न =" [0-9] {5} "आवश्यक>

— वेंडेल अल्वारेज़
स्रोत

1

यह उल्लेख करने के लिए और बेशक टेक्सोटेला के लिए http://www.texotela.co.uk/code/jquery/numeric/ संख्यात्मक इनपुट क्रेडिट। एक परीक्षण पृष्ठ के साथ।

— क्लार्क सुपरमैन
स्रोत

0

कई अंकों (न केवल एक अंक) को स्वीकार करने के लिए REGEX स्थिति में "+" जोड़ना बेहतर है:

<input type="text" name="your_field" pattern="[0-9]+">

— दशको लियोनिद
स्रोत

0

एक तरह से अनुमति वर्ण कोड की एक सरणी हो सकती है और फिर उपयोग करें Array.includes यह देखने के फ़ंक्शन का क्या चरित्र दर्ज किया गया है।

उदाहरण:

<input type="text" onkeypress="return [45, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57].includes(event.charCode);"/>

— MA1
स्रोत

0

काफी सरल?

inputField.addEventListener('input', function () {
  if ((inputField.value/inputField.value) !== 1) {
    console.log("Please enter a number");
  }
});

<input id="inputField" type="text">

स्निपेट का विस्तार करें

— Normajean
स्रोत