如何始终在移动设备和 iPad 上显示数字输入微调器

Question

我有一些 HTML/CSS 可以在桌面上完美运行。

它也适用于移动设备，但输入字段中用于数字选择的向上和向下箭头不显示，迫使用户手动“输入”数字。客户要求在移动视图中保留这些数字微调器箭头。

有很多关于 how to hide/disable spinners and even a few about how to retain the spinners 的问题，但这些问题没有答案或答案不正确，遵循这些答案和建议并没有解决这个问题。

        @media only screen {

            input[type=number] {
               /* -moz-appearance: number-input; */   
            }
 
            input[type=number]::-webkit-inner-spin-button,
            input[type=number]::-webkit-outer-spin-button {
                -webkit-appearance: inner-spin-button;
                /***
                 * Below tried and failed: 
                 ***/
                /* -moz-appearance: number-input; */ 
                /*-ms-appearance: inner-spin-button;*/
                /*appearance: auto;*/
                margin: 0;
                opacity: 1;
            }
            
            #updQtyLoose47 {
             /* basic styling */
            background: rgba(245, 235, 170, 0.75);
            border-radius: 0;
            border: none;
            border: solid 1px #dbdbdb;
            color: inherit;
            display: block;
            outline: 0;
            padding: 0.25rem 0 0.25rem 0.75rem;
            text-decoration: none;
            width: 100px;
            }
        }

<div>
<input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" id="updQtyLoose47" min="0" max="8" >
</div>

平台：

iPad (iOS 12.5)

浏览器：

Google Chrome 和 Safari

尝试的解决方案：

不透明度设置为 1，但这不会显示微调器 (source)。
设置 moz-appearance: number-input;（和类似设置）不显示微调器 (source)。
设置 -webkit-appearance: inner-spin-button; 不显示微调器 (source)。
在 HTML 输入元素上设置 inputmode="numeric" 不显示微调器 (source)。

iPad PC 上的 Firefox Inspector 模拟器（就其价值而言）显示微调按钮，而 Google Chrome Inspector 不显示微调按钮。

有评论here说

In firefox and safari, its a default feature to show it always.

Safari 12.1 似乎不再如此

如何在网页的 iPad 显示屏上显示这些输入微调器按钮？

Answer 1

您可以尝试检查 this example 这里

Answer 2

在某些时候，对于像 input 这样的原生元素，跨平台获得一致的结果是困难且棘手的。出于这个原因，我建议您使用一些 javascript 重新创建 'fake' 本机行为。这是一个非常基本的例子：

const input = document.querySelector('input[type=number]')

const increment = () => {
  input.value = Number(input.value) + 1
}
const decrement = () => {
  input.value = Number(input.value) - 1
}

document.querySelector('.spinner.increment').addEventListener('click', increment)
document.querySelector('.spinner.decrement').addEventListener('click', decrement)

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

.number-input {
  position: relative;
  width: fit-content;
}

input {
  width: 60px;
}

.spinners {
  position: absolute;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: 1px;
  transform: translateY(-50%);
}

.spinner {
  font-size: 7px;
  border: none;
  padding: 0 1px;
}

.spinner:hover {
  background: lightgrey;
}

<div class="number-input">
  <input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" min="0" max="8">
  <div class="spinners">
    <button class="spinner increment">&#9650;</button>
    <button class="spinner decrement">&#9660;</button>
  </div>
</div>

如果您需要更个性化的东西，只需稍微调整一下 css 和 html 结构：

const input = document.querySelector('input[type=number]')

const increment = () => {
  input.value = Number(input.value) + 1
}
const decrement = () => {
  input.value = Number(input.value) - 1
}

document.querySelector('.spinner.increment').addEventListener('click', increment)
document.querySelector('.spinner.decrement').addEventListener('click', decrement)

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

.number-input {
  display: flex;
}

input {
  width: 40px;
  border: solid 1px lightgrey;
  border-radius: 0;
  text-align: center
}

.spinner {
  border: solid 1px lightgrey;
}

.spinner:hover {
  background: lightgrey;
}

.spinner:first-child {
  border-radius: 3px 0 0 3px;
}

.spinner:last-child {
  border-radius: 0 3px 3px 0;
}

<div class="number-input">
  <button class="spinner decrement">-</button>
  <input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" min="0" max="8">
  <button class="spinner increment">+</button>
</div>

这里是 JQuery 的版本：

const input = $('input[type=number]')

const increment = () => {
  input.val(Number(input.val()) + 1)
}
const decrement = () => {
  input.val(Number(input.val()) - 1)
}

$('.spinner.increment').click(increment)
$('.spinner.decrement').click(decrement)

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

.number-input {
  display: flex;
}

input {
  width: 40px;
  border: solid 1px lightgrey;
  border-radius: 0;
  text-align: center
}

.spinner {
  border: solid 1px lightgrey;
}

.spinner:hover {
  background: lightgrey;
}

.spinner:first-child {
  border-radius: 3px 0 0 3px;
}

.spinner:last-child {
  border-radius: 0 3px 3px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="number-input">
  <button class="spinner decrement">-</button>
  <input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" min="0" max="8">
  <button class="spinner increment">+</button>
</div>

Answer 3

当我意识到操作系统对输入的处理方式不同（弹出键盘而不显示箭头）时，我一直在寻找在移动设备上显示箭头的方法 Chrome。我遇到了这个 post，我改进了代码，使您可以在同一页面中拥有多个按钮，但只有一个功能来管理每个按钮的 increment/decrement。最后一个示例如下图所示的智能手机。

要添加第三个按钮，只需输入 id='3'，带加号的按钮带 id='pb3'，带负号的按钮带 id='mb3' 您不需要更改任何其他内容

您可以使用 onchange 事件或 onkeyup 事件来调用 imposeMinMax() 函数。取决于您的应用程序。 onkeyup 仅当您的 min<0 和 max>0 时才有效。

我还添加了当用户按住按钮时自动递增输入。访问获取自动增量代码。

function imposeMinMax(el){ /*this function delimits max and min*/
  if(el.value != ""){
    if(parseInt(el.value) < parseInt(el.min)){
      el.value = el.min;
    }
    if(parseInt(el.value) > parseInt(el.max)){
      el.value = el.max;
    }
  }
}

function modIn(inId){
  if(inId.charAt(0)=='p'){                  /*p for plus*/
    var targetId = inId.match(/\d+/)[0];    /*just keep the number*/
    document.getElementById(targetId).value ++;
    imposeMinMax(document.getElementById(targetId));
  } 
  if(inId.charAt(0)=='m'){                  /*m for minus*/
    var targetId = inId.match(/\d+/)[0];
    document.getElementById(targetId).value --;
    imposeMinMax(document.getElementById(targetId));
  } 
}

.signBut {
      width: 30px;
      margin-bottom: 5px;
    }

.inNum {width: 40px;}

  
<!--    Bootstrap --> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class='card'>
  <div class='card-body' >
    <h5 class='card-title'>TEMPERATURE</h5>
      <div class='container'>
        <div class='row'>
          <div class='col-auto' style="width: 40%;">
            <label >Temprerature:</label>
          </div>
          <div class='col-auto'>
            <button type="button" class="btn btn-danger btn-sm signBut" id='mb1' onclick='modIn(this.id)'>-</button>
            <input type="number" name='tempCalib' id='1' class='inNum' onchange='imposeMinMax(this)' value='0' max='6' min="-6" step="1">                 
            <button type="button" class="btn btn-danger btn-sm signBut" id='pb1' onclick='modIn(this.id)'>+   </button>&nbsp;°C
          </div>
        </div>
        <br>
        <div class='row'>
          <div class='col-auto' style="width: 40%;">
            <label>Hysteresis:</label>
          </div>
          <div class='col-auto'>
            <button type="button" class="btn btn-danger btn-sm signBut" id='mb2' onclick='modIn(this.id)'>-</button>
            <input type="number" name='tempHyst' id='2' class='inNum' onchange='imposeMinMax(this)' value="1" max="4" min="-4" step="1">                 
            <button type="button" class="btn btn-danger btn-sm signBut" id='pb2' onclick='modIn(this.id)'>+</button>&nbsp;°C
          </div>
         </div>
        </div>
       </div>
      </div>

如何始终在移动设备和 iPad 上显示数字输入微调器

How to always display numerical input spinners on mobile and iPad

html

css

spinner

ipad

平台：

浏览器：

尝试的解决方案：

如何在网页的 iPad 显示屏上显示这些输入微调器按钮？