如何禁用输入字段类型= number从键盘输入值

i具有以下输入字段。我想禁用打字选项，但仍然希望通过单击 number的增量/减少选项。

。。

我使用 min and Max ，但是当我通过键按输入更大的值(例如 9999 (时无济于事。它只是允许任何数字键。

如何解决它？

  <input 
       type="number"
       id="inputCart"
      min="1"
      max="20"
      onChange={(e) => this.onChangeQty(e)}
      />

编辑：

<input className="text-center"
       type="number"
      min="1"
      class="numberInput"
      onChange={(e) => this.onChangeQty(e)}
      />
      
      
onChangeQty(e)
{
  const element = document.getElementsByClassName('numberInput');
function handleKeypress(e) {
  element[0].value = '';
    }
element[0].addEventListener('keyup', handleKeypress);
}

它仍然不起作用，允许我通过键按

插入任何值


 <input 
       type="number"
       id="inputCart"
      min="1"
      max="20"
      onChange={(e) => this.onChangeQty(e)}
      onKeyUp={e => e.preventDefault()}
      />

设置onKeyUp，通过事件并防止默认操作

您可以做的就是获取要阻止的输入的参考( getElementsByClassName(，并在用户输入一个值时，将addEventListener添加到keyUp事件中，这样您将重置输入的值，并且它们无法在内部输入任何数字(它们添加值的唯一方法是使用增量/减少箭头(。例如：

const element = document.getElementsByClassName('numberInput');
function handleKeypress(e) {
  element[0].value = '';
}
element[0].addEventListener('keyup', handleKeypress);

<label for="numberInput">Number Input: </label>
<input type="number" name="quantity" min="1" max="100" class="numberInput">

您可以使用此代码。

function SupressInput($event) {
    $event.preventDefault();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>    
    <input max="10" min="1" onkeypress="SupressInput(event);" type="number">
</body>

相关内容

最新更新

热门标签：