在移动端如何显示带有上下箭头的数字输入框？

Question

对于输入类型为数字的表单，在网页视图中，可以轻松地在输入框右侧显示上下箭头。我已经 preventDefault 了输入以强制用户使用箭头来增加/减少数字。但是这些箭头在移动视图中不会显示出来。有没有办法在移动视图中强制显示箭头，使用户不能直接输入数字而必须使用递增/递减操作符？

- Manishbasnyat182

Answer 1

输入字段的工作方式由用户使用的浏览器和/或操作系统定义。您可以使用this answer中描述的方法。但是，如果您想对用户体验拥有完全控制权，您应该自己制作箭头。我已经写了下面这段代码，您可以将其用作起点。

const updateValue = (qry, type, value) => {
  const el = document.querySelector(qry)
  const currentValue = parseInt(el.value,10)
  let maxValue = null
  let minValue = null
  if (el.getAttribute("max")) {
    maxValue = parseInt(el.getAttribute("max"), 10)
  }
  
  if (el.getAttribute("min")) {
    minValue = parseInt(el.getAttribute("min"), 10)
  }
  
  if (type=="add") {
    if (typeof maxValue == 'number' && currentValue + value > maxValue) {
      el.value = maxValue
    } else {
      el.value = currentValue + value
    }
  } else if (type=="subtract") {
    if (typeof minValue == 'number' && currentValue - value < minValue) {
      el.value = minValue
    } else {
      el.value = currentValue - value
    }
  } 
}

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

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

#input {
  text-align: center;
  width: 2em;
}

<span onClick="updateValue('#input','subtract', 1)">▽</span>
<input type="number" size="10" min="0" max="8" value="4" id="input"/>
<span onClick="updateValue('#input','add', 1)">△</span>

- user007

Answer 2

希望这能解决问题。 注意：您可以根据需要修改高度和宽度。

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
 opacity: 1 !important;
 margin: 0;
 width: 15px;
 height: 35px;
}

- Zohaib Ullah

Answer 3

尝试使用这个媒体查询。

@media only screen and (max-width : 1024px) {
    input[type=number]::-webkit-inner-spin-button, 

    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none
      margin: 0;
    }
}

- Arun BS

---

这并不能解决问题。这似乎是在隐藏所需的旋转器。 - Martin