有没有一种方法可以强制用户在<input type =“ number” />中使用向上和向下箭头键？

Question

我有以下输入框：

输入框的HTML代码如下：

<input type="number" min="1" max="50" defaultValue="12"/>

因此，我的问题是：

是否有一种方法可以强迫用户使用上下箭头键，并禁止用户直接在输入框中删除/修改数字？如果是这样，我该如何用HTML或使用React.js做到这一点？

Answer 1

通过检查keydown属性，可以将用户限制为KeyboardEvent.key上的ArrowUp和ArrowDown键：

document.getElementById( 'example' ).addEventListener( 'keydown', event =>
{
    if ( ![ 'ArrowUp', 'ArrowDown' ].includes( event.key ) )
    {
        event.preventDefault();
    }
});

Answer 2

在输入字段中尝试使用onKeyPress=this.your_key_eventlister_function() 然后在你的职能              your_key_eventlistener_function(e){ if(e.key != 'ArrowUp' || e.key !='ArrowDown'){ e.preventDefault(); } }