Thuộc tính max của HTML DOM Input Number trả về và cho phép thay đổi giá trị thuộc tính max 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ị max:
object.max
Thiết lập max:
object.max = “số"
Ví dụ
Dưới đây là ví dụ về thuộc tính max của 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.
