पूर्णांकों के साथ न्यूनतम और अधिकतम सेट करने का तरीका दिखाने वाले बहुत सारे उदाहरण हैं। मुझे यह सुनिश्चित करने की ज़रूरत है कि मूल्यों की सीमा भी फ़्लोट हो सकती है। नीचे बताया गया है कि मैं इनपुट प्रकार refund_amount के लिए मान और अधिकतम विशेषताएँ कैसे सेट कर रहा हूँ। यहां समस्या यह है कि कोई भी jQuery के साथ सेट किए गए अधिकतम मान से अधिक मान दर्ज कर सकता है।

window.onload = function() {
    var src = document.getElementById("grand_total");
    var dst = document.getElementById("refund_amount");
    if (dst != "") {
        dst.setAttribute("value", src.textContent);
        dst.setAttribute("max", src.textContent);       
    }
};

एचटीएमएल:

<tr>
  <td align="right" colspan="3">Enter Refund Amount</td>
  <td align="left" colspan="4"><input type="text" size="11" id="refund_amount" 
                 name="refund_amount" value='' min="" max="" required/></td>
</tr>

मैं यह कैसे सुनिश्चित करूं कि यह अधिकतम विशेषता की तुलना में कभी भी उच्च मूल्य की अनुमति नहीं देता है?

2
CodeForGood 3 फरवरी 2021, 17:33
1
इसे बनाएं <इनपुट प्रकार = "संख्या" />
 – 
Prikesh Savla
3 फरवरी 2021, 17:34
1
min और max केवल type="number" इनपुट पर लागू होते हैं - और फिर भी वे सत्यापन के साधन के रूप में विश्वसनीय नहीं हैं। उदाहरण के लिए वे उपयोगकर्ता को max की अनुमति से अधिक संख्या में टाइप करने से नहीं रोकते हैं। यदि आपको किसी श्रेणी के भीतर किसी मान को सत्यापित करने की आवश्यकता है तो आपको इसे मैन्युअल रूप से करने की आवश्यकता होगी।
 – 
Rory McCrossan
3 फरवरी 2021, 17:36
@RoryMcCrossan, क्या आप कृपया एक उदाहरण साझा कर सकते हैं कि इसे मैन्युअल रूप से कैसे करें?
 – 
CodeForGood
3 फरवरी 2021, 17:54
मानों की तुलना करने का तरीका दिखाने वाला एक उदाहरण - if (src.value > 99)
 – 
freedomn-m
3 फरवरी 2021, 17:58
@ स्वतंत्रता-एम, धन्यवाद, आपके समाधान को लागू करने के लिए, मेरे पास एक ईवेंट हैंडलर होना चाहिए। सही?
 – 
CodeForGood
3 फरवरी 2021, 18:02

1 उत्तर

सबसे बढ़िया उत्तर

min और max एट्रिब्यूट केवल type="number" इनपुट पर काम करते हैं। यह भी ध्यान देने योग्य है कि वे सत्यापन के साधन के रूप में विश्वसनीय नहीं हैं, क्योंकि वे उपयोगकर्ता को min/max सेटिंग्स की सीमा से बाहर की संख्या में टाइप करने से नहीं रोकते हैं।

उस पर काम करने के लिए आप एक change ईवेंट और Math.min() और Math.max() फ़ंक्शन का उपयोग करके मान को मैन्युअल रूप से सत्यापित कर सकते हैं और इसे सीमा के भीतर सही कर सकते हैं। ये कोशिश करें:

window.addEventListener('load', function() {
  var src = document.getElementById("grand_total");
  var dst = document.getElementById("refund_amount");

  if (dst) {
    dst.value = dst.max = src.textContent;
  }
});

document.querySelectorAll('input[type="number"]').forEach(input => {
  input.addEventListener('change', e => {
    let el = e.target;
    el.value = Math.min(Math.max(el.value, el.min), el.max);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Grand total</td>
    <td id="grand_total">25.68</td>
  </tr>
  <tr>
    <td align="right" colspan="3">Enter Refund Amount</td>
    <td align="left" colspan="4">
      <input type="number" step="1" min="11.11" id="refund_amount" name="refund_amount" value="" required />
    </td>
  </tr>
</table>
1
Rory McCrossan 3 फरवरी 2021, 18:48