Thuộc tính min của DOM Input Number trả về và cho phép thay đổi giá trị thuộc tính min của trường nhập liệu kiểu type="number" trong tài liệu HTML.
Cú pháp
Cú pháp như sau:
Lấy giá trị min:
object.min
Thiết lập min:
object.min = “số"
Ví dụ
Dưới đây là ví dụ về thuộc tính min của HTML DOM Input Number:
<!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>Demo thuộc tính max/min của DOM Input Number</h1> <p>Nhập số báo danh của bạn (từ 1 đến 60)</p> <input type="number" class="numberInput" min="1" max="60"> <button type="button" onclick="showMySelection()" class="btn">Hiển thị số báo danh</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="Vui lòng nhập giá trị!!"; }else{ if((numberInput.value >= 1) && (numberInput.value <= 60)){ showMsg.innerHTML = numberInput.value; }else{ showMsg.innerHTML = "Vui lòng nhập đúng số báo danh!!"; } } } </script> </body> </html>
Kết quả
Đoạn mã trên sẽ cho kết quả như sau:
Nhập số báo danh bất kỳ từ 1 đến 60 sau đó nhấn nút 「Hiển thị số báo danh」 để hiển thị số báo danh.
Nhập số báo danh ngoài phạm vi và nhấn nút 「Hiển thị số báo danh」 để hiển thị thông báo cảnh báo.
