केवल सकारात्मक संख्याओं के प्रकार = "संख्या" कैसे बनाएं

Question

वर्तमान में मेरे पास निम्नलिखित कोड है

<input type="number" />

यह कुछ इस तरह से आता है

दाईं ओर की छोटी चयनकर्ता चीजें संख्या को नकारात्मक में जाने देती हैं। मैं इसे कैसे रोकूं?

मुझे उपयोग करने के बारे में संदेह है type="number", यह हल करने की तुलना में अधिक समस्याएं पैदा कर रहा है, मैं इसे किसी भी तरह से जांचने जा रहा हूं, तो क्या मुझे अभी उपयोग करने के लिए वापस जाना चाहिए type="text"?

Comments

आपको अभी भी सर्वर पर मान को मान्य करने की आवश्यकता होगी। जो भी सामग्री वे चाहते हैं भेजने के लिए कोई भी क्षेत्र को ओवरराइड कर सकता है।

— zzzzBov

@zzzzBov हाँ, मैं इसे php के साथ सत्यापित करता हूं, और तैयार स्टेटमेंट का भी उपयोग करता हूं, केवल एक चीज जो चिंता करने के लिए बची हुई है वह है जो लोग जौ जानते हैं कि वेब ब्राउज़र कैसे बनाते हैं। योग्य

— एरियन फोरेटोश

संभव प्रकार के डुप्लिकेट है क्या नकारात्मक प्रकार प्राप्त करने वाले इनपुट प्रकार = "संख्या" को रोकने का कोई तरीका है?

— वेगा

Answer 1

एक विशेषता जोड़ेंmin

<input type="number" min="0">

Comments

यह चयनकर्ता तीर के लिए काम करता है, लेकिन एक नकारात्मक संख्या टाइप करने की अनुमति देता है

— डेविड बर्टन

विशेषता बदलने से min="0.000001"ज्यादातर मामलों में मदद मिलेगी। 6 से अधिक दशमलव स्थानों पर, जावास्क्रिप्ट इसे प्रतिपादक प्रारूप में बदल देगा।

— MarkMYoung

डिफ़ॉल्ट रूप से, यह केवल पूर्णांकों को अनुमति देता है, लेकिन दशमलव नहीं। ऑलिव दशमलव मान देखें ।

— str

Answer 2

मैंने नकारात्मक संख्या को रोकने के लिए एक और उपाय खोजा है।

<input type="number" name="test_name" min="0" oninput="validity.valid||(value='');">

Comments

आप इसके साथ फ्लोटिंग नंबर नहीं जोड़ सकते। इसके अलावा, संख्यात्मक स्टेपर भी यहाँ काम नहीं कर रहा है।

— हैमज़ॉक्स

oninput="validity.valid||(value='');"टाइपिंग-वी संख्याओं में से एक को रोकता है

— हैलो यूनिवर्स

इसे मान्य उत्तर के रूप में चिह्नित किया जाना चाहिए क्योंकि यह टाइपिंग को भी रोकता है "-" चरित्र

— JanBrus

यह बहुत अच्छा काम करता है अगर आपको सकारात्मक, पूरे पूर्णांक संख्या की आवश्यकता होती है, जैसा कि मैंने किया था। धन्यवाद!

— बोरिस

Answer 3

यह इस बात पर निर्भर करता है कि आप कितना सटीक होना चाहते हैं। यह आप केवल पूर्णांकों को स्वीकार करना चाहते हैं:

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

यदि आप चाहते हैं कि उदाहरण के लिए, दशमलव बिंदु के बाद दो अंक हों:

<input type="number" min="0.01" step="0.01">

Comments

ऐसा लगता है कि वर्तमान में यह एक कदम के बिना काम करता है = "1" ... क्या मुझे अभी भी इसे जोड़ना चाहिए?

— एरियन फोरेटोश

@ एरियन आप इसे तब तक छोड़ सकते हैं जब तक आप maxमूल्य निर्दिष्ट नहीं करते हैं ।

— पावलो

चरण 1 ब्राउज़र डिफ़ॉल्ट है, आप ठीक हैं

— Stephan Muller

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

— डेविड बर्टन

मिनट = "1" चरण = "1" अभी भी मुझे 1.2 की तरह फ्लोटिंग नंबर टाइप करने की अनुमति देता है। मैं केवल पूर्णांक को कैसे बाध्य कर सकता हूं?

— सैम

Answer 4

आप इनपुट को टैग के onkeypressभीतर जोड़कर केवल सकारात्मक पूर्णांक बनाने के लिए बाध्य कर सकते हैं input।

<input type="number" onkeypress="return event.charCode >= 48" min="1" >

यहां, event.charCode >= 48यह सुनिश्चित करता है कि केवल 0 से अधिक या उसके बराबर की संख्या वापस कर दी जाए, जबकि minटैग यह सुनिश्चित करता है कि आप इनपुट बार के भीतर स्क्रॉल करके न्यूनतम 1 पर आ सकते हैं।

Comments

एज पर आप इसमें "ए" दर्ज कर सकते हैं।

— एमी ब्लेंकशिप

आप अभी भी ऋणात्मक संख्या

— मिथाइल

Answer 5

आप type="number"केवल सकारात्मक संख्या स्वीकार करने के लिए निम्नलिखित का उपयोग कर सकते हैं :

input type="number" step="1" pattern="\d+"

Comments

क्या आप यह समझाने की कोशिश कर सकते हैं कि आपका कथन क्या करता है और यह क्यों मदद करता है? इसके अलावा, आपके पास दो अलग-अलग स्निपेट्स हैं। कौनसा सही है?

— ऐनाडॉन

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

— दीपावली

Answer 6

आप निम्न द्वारा एक नंबर इनपुट फॉर्म में नकारात्मक इनपुट को रोक सकते हैं:

<input type="number" onkeyup="if(this.value<0){this.value= this.value * -1}">

Answer 7

प्रयत्न

<input type="number" pattern="^[0-9]" title='Only Number' min="1" step="1">

Comments

जब आप एक प्रकार को परिभाषित करते हैं तो आपको भूमिका के लिए विशिष्ट प्रारूप की आवश्यकता होती है।

— रोजेरियो डी मोरेस

क्रोम में इस कोशिश की, और यह पैटर्न लागू नहीं करता है

— डेविड बर्टन

क्या कोई तरीका है कि अगर मैं "संख्या" के बजाय टाइप = "टेक्स्ट" जोड़ूं?

— कपिल वर्मा

Answer 8

यदि पाठ इनपुट की आवश्यकता है , तो पैटर्न भी काम करता है

<input type="text" pattern="\d+">

Answer 9

मुझे इनपुट के लिए कुछ काम के रूप में सही समाधान नहीं मिल रहा है, लेकिन कॉपी और पेस्ट के लिए नहीं, कुछ अन्य तरीके हैं। यह समाधान मेरे लिए काम करता है। यह "e", "e", कॉपी और पेस्ट "e" टेक्स्ट टाइप करने से रोकता है।

एक समारोह बनाएँ।

<script language="JavaScript">

  // this prevents from typing non-number text, including "e".
  function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    let charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
      evt.preventDefault();
    } else {
      return true;
    }
  }
</script>

इन गुणों को इनपुट में जोड़ें। यह दो "ई" सहित गैर-संख्या वाले पाठ को कॉपी और पेस्ट करने से रोकता है। आपको प्रभावी होने के लिए दोनों का एक साथ होना आवश्यक है।

<input type="number" oninput="validity.valid||(value='');" onpress="isNumber(event)" />

यदि आप Vue का उपयोग कर रहे हैं, तो आप इस उत्तर को यहां दे सकते हैं । मैंने इसे एक मिक्सी में निकाला है जिसका पुन: उपयोग किया जा सकता है।

Answer 10

इस कोड को अपने इनपुट प्रकार में जोड़ें;

onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"

उदाहरण के लिए:

<input type="text" name="age" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />

Comments

यह वास्तव में किसी के लिए भ्रामक है जो समझ नहीं पा रहा है कि क्या हो रहा है।

— रोजा

इस तरह, आप अभी भी इनपुट, वर्णमाला या यहां तक ​​कि विशेष वर्णों पर कुछ भी पेस्ट कर सकते हैं

— Lê Gia Lễ

Answer 11

अन्य समाधान Js का उपयोग इसे सकारात्मक बनाने के लिए है (न्यूनतम विकल्प को निष्क्रिय किया जा सकता है और उपयोगकर्ता के प्रकार की पुष्टि होने पर मान्य नहीं है) यदि आवश्यक नहीं है तो नकारात्मक (और 'कीडाउन') घटना का भी उपयोग किया जा सकता है!

let $numberInput =  $('#whatEverId');
$numberInput.on('change', function(){
    let numberInputText = $numberInput.val();
    if(numberInputText.includes('-')){
        $numberInput.val(Math.abs($numberInput.val()));
    }
});

Answer 12

यह इस बात पर निर्भर करता है कि आप एक इंट या फ्लोट क्षेत्र चाहते हैं। यहां देखें कि दोनों क्या दिखेंगे:

<input type="number" name="int-field" id="int-field" placeholder="positive int" min="1" step="1">
<input type="number" name="float-field" id="float-field" placeholder="positive float" min="0">

इंट फील्ड में सही वेलिडेशन जुड़ा हुआ है, क्योंकि इसका मिनिमम है 1. फ्लोट फील्ड 0 को स्वीकार करता है, हालाँकि; इससे निपटने के लिए, आप एक और बाधा अवरोधक जोड़ सकते हैं :

function checkIsPositive(e) {
  const value = parseFloat(e.target.value);
  if (e.target.value === "" || value > 0) {
    e.target.setCustomValidity("");
  } else {
    e.target.setCustomValidity("Please select a value that is greater than 0.");
  }
}

document.getElementById("float-field").addEventListener("input", checkIsPositive, false);

यहाँ JSFiddle

ध्यान दें कि इनमें से कोई भी समाधान उपयोगकर्ता को अमान्य इनपुट में टाइप करने की कोशिश से पूरी तरह से नहीं रोकता है, लेकिन आप कॉल कर सकते हैं checkValidityयाreportValidity यह पता लगा सकते हैं कि उपयोगकर्ता ने वैध इनपुट में टाइप किया है या नहीं।

बेशक, आपके पास अभी भी सर्वर-साइड सत्यापन होना चाहिए क्योंकि उपयोगकर्ता हमेशा क्लाइंट-साइड सत्यापन को अनदेखा कर सकता है।

Answer 13

इसे इस्तेमाल करे:

• कोणीय 8 में परीक्षण किया गया
• मूल्य सकारात्मक हैं
• यह कोड भी हैंडल्स nullऔर negitiveवैल्यूज है।

              <input
                type="number"
                min="0"
                (input)="funcCall()" -- Optional
                oninput="value == '' ? value = 0 : value < 0 ? value = value * -1 : false"
                formControlName="RateQty"
                [(value)]="some.variable" -- Optional
              />

Answer 14

यदि आप एक ऋणात्मक संख्या दर्ज करने का प्रयास करते हैं, तो onkeyup घटना इसे ब्लॉक कर देती है और यदि आप इनपुट संख्या पर तीर का उपयोग करते हैं, तो onblur घटना उस भाग को हल करती है।

<input type="number" 
    onkeyup="if(this.value<0)this.value=1"
    onblur="if(this.value<0)this.value=1"
>

Answer 15

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

Answer 16

पाठ प्रकार के इनपुट के साथ आप इसका उपयोग बेहतर सत्यापन के लिए कर सकते हैं,

return (event.keyCode? (event.keyCode == 69 ? false : event.keyCode >= 48 && event.keyCode <= 57) : (event.charCode >= 48 && event.charCode <= 57))? true : event.preventDefault();

Answer 17

इसे इस्तेमाल करे:

Yii2 : Validation rule 

    public function rules() {
    return [
['location_id', 'compare', 'compareValue' => 0', 'operator' => '>'],
        ];
}