Thuộc tính min số đầu vào DOM trả về và sửa đổi giá trị của thuộc tính min của trường đầu vào type =”number” trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
-
Trả lại tối thiểu
object.min
-
2. Sửa đổi tối thiểu
object.min = “number”
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính số tối thiểu đầu vào HTML DOM -
<!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;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Input number max/min property Demo</h1>
<p>Enter your roll number (between 1 and 60)</p>
<input type="number" class="numberInput" min="1" max="60">
<button type="button" onclick="showMySelection()" class="btn">Show Roll Number</button>
<div class="show"></div>
<script>
function showMySelection() {
var numberInput = document.querySelector(".numberInput");
var showMsg = document.querySelector(".show");
console.log(numberInput.min,numberInput.max);
if(numberInput.value === ''){
showMsg.innerHTML="Please enter value!!";
}else{
if((numberInput.value <= 1) && (numberInput.value <= 60)){
showMsg.innerHTML = numberInput.value;
}else{
showMsg.innerHTML = "Please enter correct roll number!!";
}
}
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhập bất kỳ số cuộn nào từ 1 đến 60 rồi nhấp vào “ Hiển thị số cuộn ”Để hiển thị số cuộn.
Nhập bất kỳ số cuộn nào ngoài phạm vi và sau đó nhấp vào nút “Hiển thị số cuộn” để hiển thị thông báo cảnh báo.
