HTML DOM Input Number step Property - स्टेप मान सेट/प्राप्त करें

HTML DOM Input Number step Property

HTML DOM input number step property HTML दस्तावेज़ में संख्या इनपुट फील्ड के step attribute का मान प्राप्त या संशोधित करता है। यह संख्या इनपुट में बढ़ने/घटने का अंतराल (interval) निर्धारित करता है।

Syntax

Step मान प्राप्त करना:

numberInputObject.step

Step मान सेट करना:

numberInputObject.step = "number"

उदाहरण

संख्या इनपुट जहां स्टेप को 5 पर सेट करके बढ़त/घटत को नियंत्रित किया जाता है:

<!DOCTYPE html>
<html>
<head>
<style>
  html { height: 100%; }
  body {
    text-align: center;
    color: #fff;
    background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
    height: 100%;
  }
  p { font-weight: 700; font-size: 1.1rem; }
  input {
    display: block;
    width: 35%;
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
    font-weight: bold;
    padding: 8px;
    margin: 1rem auto;
  }
  .btn {
    background: #0197F6;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 35%;
    margin: 2rem auto;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
  .show { font-size: 1.5rem; color: #db133a; font-weight: bold; }
</style>
</head>
<body>
<h1>DOM Input number step property Demo</h1>
<p>नमस्ते, कोई संख्या दर्ज करें और फिर उसका मान बढ़ाने/घटाने का प्रयास करें</p>
<input type="number" class="numberInput">
<button type="button" onclick="setStep()" class="btn">Step को 5 पर सेट करें</button>
<button type="button" onclick="getStep()" class="btn">वर्तमान step मान दिखाएं</button>
<div class="show"></div>
<script>
  function setStep() {
    var numberInput = document.querySelector(".numberInput");
    numberInput.step = "5";
  }
  function getStep() {
    var numberInput = document.querySelector(".numberInput");
    var showMsg = document.querySelector(".show");
    showMsg.innerHTML = numberInput.step;
  }
</script>
</body>
</html>

आउटपुट

संख्या इनपुट में मान दर्ज करें और "Step को 5 पर सेट करें" बटन पर क्लिक करें। अब तीर कुंजियों (ऊपर/नीचे) से मान बढ़ाने/घटाने पर यह 5 के गुणकों में बदलेगा। "वर्तमान step मान दिखाएं" बटन से वर्तमान step मान देख सकते हैं।

मुख्य बिंदु

• step attribute संख्या इनपुट के वैध मानों का अंतराल निर्धारित करता है
• डिफ़ॉल्ट step मान 1 होता है
• step="5" सेट करने पर मान 0, 5, 10, 15... जैसे गुणक ही वैध होंगे
• step="any" सेट करके कोई भी दशमलव मान अनुमत कर सकते हैं
• यह min और max के साथ मिलकर वैध मानों की सीमा परिभाषित करता है