在向上箭頭單擊輸入類型=“數字”時顯示值是最大值的通知

Question

我有輸入：

<input type="number" step="1" min="0" max="4" />

當用戶單擊向上箭頭並且當前值已經是 4 時，如何顯示最大值為 4 的警報？

Answer 1

嘗試這個

您必須告訴該字段它已經被點擊並達到了 4，然后再提醒下次

尊重 max=4 的瀏覽器將不允許該字段增加超過 4，因此該值本身是不夠的

 document.getElementById("num").addEventListener("click", function(e) { const value = this.value, max = this.getAttribute("max"), min = this.getAttribute("min"), minned = this.dataset.minned === "true"; maxed = this.dataset.maxed === "true"; if (value === max && maxed) { alert("Value is max"); } if (value === min && minned) { alert("Value is at 0"); } this.dataset.maxed = value === max ? "true" : "false"; this.dataset.minned = value === min ? "true" : "false"; }) document.getElementById("num").addEventListener("input", function(e) { const value = this.value || 0, min = this.getAttribute("min"), max = this.getAttribute("max"); if (value != "" && value > max || value < min) { alert(`Value should be between ${min} and ${max}`); this.value = ""; } this.dataset.maxed = value === max ? "true" : "false"; this.dataset.minned = value === min ? "true" : "false"; })

 <input id="num" type="number" step="1" min="0" max="4" />

Answer 2

嘗試這個

 function handleMyInput(event){ const { value, max } = event.target if(value >= max) alert('Max value reached'); }

 <input type="number" step="1" min="0" max="4" id='myInput' onclick='handleMyInput(event)' />

Answer 3

據我從您的信息中猜測，添加事件偵聽器會做您想做的事情：

 const input_number = document.getElementById("input_number"); input_number.addEventListener("change", function(){ if(input_number.value > 4) { alert("Max. number is 4!") } })

 <input id="input_number" type="number" step="1" min="0" max="4" />