如何在桌面及移动端设备均显示number类型输入框的调节箭头

问题原因 #

移动端主流浏览器（包括iOS Safari、安卓Chrome、大部分国产内置浏览器）默认会隐藏number输入框的原生上下调节按钮，仅修改opacity属性无法生效，因为部分内核直接将该元素的display属性设为了none。

可用解决方案 #

• 方案1：强制显示原生调节按钮（仅兼容支持该特性的浏览器）

  直接替换原有CSS即可，代码如下：

  /* Webkit内核浏览器（含iOS、安卓端webkit系浏览器） */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
    display: block !important;
    opacity: 1;
    margin-left: 6px;
  }
  /* 火狐浏览器兼容 */
  input[type=number] {
    -moz-appearance: number-input !important;
  }
  

  注意：部分定制化程度较高的移动端浏览器如果完全砍掉了原生调节按钮的渲染逻辑，该方案无法生效。

• 方案2：自定义模拟调节按钮（全端兼容，推荐）

  不依赖原生控件，自己实现加减按钮，所有端显示效果完全一致，可自定义样式。
  相关代码如下：

  HTML代码

  <div class="number-input-box">
    <button class="num-btn num-minus">-</button>
    <input min="0" max="10" type="number" value="0" readonly onkeydown="return false">
    <button class="num-btn num-plus">+</button>
  </div>
  

  CSS代码

  .number-input-box {
    display: inline-flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
  }
  .number-input-box input {
    width: 50px;
    border: none;
    text-align: center;
    outline: none;
    padding: 5px 0;
  }
  /* 隐藏原生按钮避免重复 */
  .number-input-box input::-webkit-outer-spin-button,
  .number-input-box input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  .num-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: #f0f0f0;
    cursor: pointer;
  }
  .num-btn:active {
    background: #e0e0e0;
  }
  

  JS代码

  const inputBox = document.querySelector('.number-input-box');
  const input = inputBox.querySelector('input');
  const minVal = Number(input.min);
  const maxVal = Number(input.max);
  
  // 加操作
  inputBox.querySelector('.num-plus').addEventListener('click', () => {
    const current = Number(input.value) || 0;
    input.value = Math.min(current + 1, maxVal);
  });
  
  // 减操作
  inputBox.querySelector('.num-minus').addEventListener('click', () => {
    const current = Number(input.value) || 0;
    input.value = Math.max(current - 1, minVal);
  });
  

额外优化提示 #

给input添加readonly属性可以彻底阻止移动端键盘弹出，比仅用onkeydown拦截的效果更稳妥。

内容的提问来源于stack exchange，提问作者Lama's