HTML 數字輸入：僅允許箭頭按鈕

Question

這就是我的意思：

是否可以只允許通過單擊箭頭按鈕進行輸入，而不是實際輸入？

即：我無法輸入“11”，但如果我單擊向上箭頭 11 次，那么它將 go 變為 11？

這是我現在的輸入字段：

        <input type="number" min="00" max ="99" id="timer02_min" 
        maxlength="2" value="00">

有一些本地方法可以做到這一點嗎？ 或者我應該更多地研究按鈕和一些樣式？

Answer 1

在keydown事件中使用event.preventDefault() ；

 // no keyboard document.getElementById("timer02_min").addEventListener("keydown", e => e.preventDefault()); // allow up/down keyboard cursor buttons document.getElementById("timer02_min2").addEventListener("keydown", e => e.keyCode.= 38 && e.keyCode;= 40 && e.preventDefault());

 no keyboard: <input type="number" min="00" max ="99" id="timer02_min" maxlength="2" value="00"> <br> with up/down cursor keys: <input type="number" min="00" max ="99" id="timer02_min2" maxlength="2" value="00">

Answer 2

 function change(n){ var num = document.getElementById("num"); var number1 = num.innerHTML; var number = Number(number1); var num2 = number.toString(); if(n == "s"){ }else{ number = number+n; } if(number <= 0){ number = 0; } if(number > 99){ number = 99; } if(num2.length == 1){ var num1 = number; number = "0"+num1; } document.getElementById("num").innerHTML = number; } change("s");

 .input{ border-style: solid; border-color: gray; border-width: 1px; border-radius: 2px; padding: 1px; height: 26px; width: 40px; text-align: left; position: relative; padding-left: 10px; }.spinner-button { position: absolute; top: 0px; right: 0px; } #inc-button{ padding-top: 3.5px; background-color: #ccc; width: 14.5px; text-align: center; margin-bottom: 1px; height: 10px; line-height: 10px; cursor: pointer; border: none; user-select: none; /* Standard */ } #dec-button{ cursor: pointer; padding-top: 3px; background-color: #ccc; width: 14.5px; text-align: center; margin: 0px; height: 10px; line-height: 10px; border: none; user-select: none; /* Standard */ } #inc-button:hover,#dec-button:hover{ background-color: #b5b5b5; }

 <div id="timer02_min" class="input"> <div id="num">00</div> <div class="spinner-button"> <div onclick="change(1);" id="inc-button">+</div> <div onclick="change(-1);" id="dec-button">-</div> </div> </div>

嘗試這個！

你想開始的數字把它放在#num div中。