如何在禁用的number类型输入框中保留步长调节功能

实现方法 #

disabled属性会完全禁用输入框的所有交互能力，包括步进箭头的点击事件，因此无法直接用该属性实现需求，你可以通过readonly属性配合事件拦截、样式模拟达到目标：

修改后的代码

<input 
  name="deroga" 
  type="number" 
  class="form-control form-control-disabled" 
  step=".01" 
  value="127.05"
  readonly
  onkeydown="return false"
>

各配置说明

• readonly属性：限制输入框无法手动输入内容，但不会屏蔽步进箭头的点击交互，同时输入框会正常参与表单提交
• onkeydown="return false"：拦截所有键盘操作，避免用户通过方向键、删除键修改数值，不需要限制键盘操作可删除该配置
• 新增的form-control-disabled类用于模拟禁用状态的样式，配套CSS如下：

.form-control-disabled {
  background-color: #e9ecef;
  opacity: 1;
  cursor: default;
  /* 可补充和你项目中禁用输入框一致的其他样式 */
  /* 如需禁止选中输入框内容，可添加下面的属性 */
  /* user-select: none; */
}

额外说明

如果你的项目使用Vue、React等框架，不要使用内联onkeydown写法，改为在框架对应的键盘事件回调中调用e.preventDefault()阻止默认行为即可。
如果你需要模拟原disabled属性不参与表单提交的特性，可以在表单提交前移除该输入框的name属性，或者单独处理提交参数过滤该字段。

内容的提问来源于stack exchange，提问作者CuriousPanda