JavaScript 的範圍溢位和範圍下溢屬性。
範圍下溢 − 如果元素值小於 min 屬性中指定的元素值,則將其設定為true。
範圍溢位 − 如果元素值大於 max 屬性中指定的元素值,則將其設定為true。
以下是 JavaScript 中範圍溢位和範圍下溢屬性的程式碼 −
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; } </style> </head> <body> <h1>Range Overflow and Range Underflow property</h1> Enter a number between 0 to 20<input type="number" class="num" min="0" max="20" step="1"></div> <button class="Btn">CHECK</button> <h3> Click on the above button to check if the number is between 0 and 20. </h3> <div style="color: green;" class="result"></div> <script> let resEle = document.querySelector(".result"); let numEle = document.querySelector('.num'); document.querySelector(".Btn").addEventListener("click", () => { if(numEle.validity.rangeOverflow){ resEle.innerHTML = 'Number exceeds the range'; } else if(numEle.validity.rangeUnderflow){ resEle.innerHTML = 'Number is lower than the range '; } else{ resEle.innerHTML = 'Number lies in the range'; } }); </script> </body> </html>
輸出
上述程式碼將生成以下輸出 −
輸入大於 20 的數字 −
輸入小於 0 的數字 −
廣告