輸入只允許數字 1-100 javascript

Question

我想使用 javascript 輸入百分比

<input type="text" class="form-control" id="amount" name="amount">

我制作了 js，所以當我輸入時，它會添加 %

var amount = document.getElementById('amount');
amount.addEventListener('input', function(e){
    amount.value = amount.value.replace('%','') + '%';
})

但它仍然可以輸入字符，我只想允許數字 1-100，這可能嗎？

或者您可能對輸入百分比更好的建議有任何建議

Answer 1

HTML 輸入type屬性允許number值，因此它只能接受數字值。 您還可以傳遞一個max屬性，該屬性將為輸入的數字設置限制。 例如：

<input type="number" class="form-control" id="amount" name="amount" max="[YOUR_NUMBER]">

編輯：您仍然可以使用 JS 函數驗證您的輸入。

<input type="text" class="form-control" id="amount" name="amount">

let amount = document.getElementById('amount');
amount.addEventListener('input', function(e){
    amount.value = amount.value.replace('%','')
    let tmpValue = +amount.value
    amount.value = 0 <= tmpValue <= 100 ? tmpValue + '%' : "[VALUE IF NOT 1<AMOUNT<100]";
})

Answer 2

有一點晚。 這是一個有趣的例子。 人們可以在這里加入更多的邏輯。 下面的示例只允許 0 到 100 之間的數字，並在末尾添加 %。 一旦您輸入了最多一個的數字，您必須重新開始。 這里必須建立一個新的邏輯。

 let amount = document.getElementById('amount'); amount.addEventListener('input', function(){ const n = amount.value.replace('%',''); if ( n >= 0 && n <= 100 ) { amount.value = amount.value.replace('%','') + '%' } else { amount.value = n.slice(0, -1) + '%' } })

 <input type="text" class="form-control" id="amount" name="amount">