html - 输入字段递增和递减行为删除

Question

如何删除内置的递增和递减按钮或输入字段类型的行为:数字

删除内置的递增和递减按钮或输入字段类型的行为:数字而不更改输入类型

我已经尝试过外观没有CSS类，但没有使用此类来删除行为

appearance-none

Answer 1

CSS 中的 appearance-none 类通常用于删除与表单元素关联的默认样式，但对于具有 type="的输入元素，可能并非所有浏览器都支持它号”。数字输入上的递增和递减按钮的外观通常由浏览器本身控制，并且可能不容易设置样式或删除。

结合使用 CSS 和 JavaScript 来隐藏或禁用默认的递增和递减按钮

document.getElementById('myNumberInput').addEventListener('keydown', function (e) {
  if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
    e.preventDefault();
  }
});

#myNumberInput::-webkit-inner-spin-button,
#myNumberInput::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#myNumberInput {
  -moz-appearance: textfield;
}

<input type="number" id="myNumberInput" />

注意:这种 CSS 和 JavaScript 组合应该可以在现代浏览器中工作。