Quy trình dưới phạm vi - Nếu giá trị của phần tử nhỏ hơn giá trị được chỉ định trong thuộc tính min, thì nó sẽ đặt thành true.
Tràn phạm vi - Nếu giá trị của phần tử lớn hơn giá trị của thuộc tính được chỉ định trong thuộc tính max, thì nó sẽ đặt thành true.
Sau đây là mã cho thuộc tính tràn phạm vi và thuộc tính tràn phạm vi trong JavaScript -
Ví dụ
<!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> Đầu ra
Đoạn mã trên sẽ tạo ra kết quả sau -
Khi nhập một số trên 20 -
Khi nhập một số dưới 0 -
