如何始终在移动设备和 iPad 上显示数字输入微调器 [英] How to always display numerical input spinners on mobile and iPad

问题描述

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

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

有很多关于如何做的问题隐藏/禁用微调器 甚至 一些关于如何保留微调器，但这些没有或不正确的答案，遵循这些答案和建议并没有解决这个问题.

 @media only screen {输入[类型=数字] {/* -moz-appearance: 数字输入；*/}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {-webkit-appearance:内旋转按钮；/**** 以下尝试并失败:***//* -moz-appearance: 数字输入；*//*-ms-appearance: 内旋转按钮；*//*外观:自动；*/边距:0；不透明度:1；}#updQtyLoose47 {/* 基本样式 */背景:rgba(245, 235, 170, 0.75);边界半径:0；边界:无；边框:实心 1px #dbdbdb;颜色:继承；显示:块；大纲:0；填充:0.25rem 0 0.25rem 0.75rem；文字装饰:无；宽度:100px；}}

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

平台:

iPad (iOS 12.5)

浏览器:

谷歌浏览器和 Safari

尝试的解决方案:

• opacity 设置为 1，但这不会显示微调器(来源).
• 设置 moz-appearance: number-input;(和类似的)不会显示微调器 (来源).
• 设置 -webkit-appearance:inner-spin-button; 不显示微调器 (来源).
• 在 HTML 输入元素上设置 inputmode="numeric" 不会显示微调器 (source).

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

有评论这里 那

<块引用>

在 firefox 和 safari 中，它的默认功能是始终显示.

Safari 12.1 似乎不再是这种情况

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

解决方案

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

const input = document.querySelector('input[type=number]')const 增量 = () =>{input.value = Number(input.value) + 1}const 递减 = () =>{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 外观:无；边距:0；}.数字输入{位置:相对；宽度:适合内容；}输入 {宽度:60px；}.微调{位置:绝对；右:0；顶部:50%；显示:弹性；弹性方向:列；宽度:适合内容；边距:1px；变换:translateY(-50%);}.微调{字体大小:7px；边界:无；填充:0 1px；}.spinner:悬停{背景:浅灰色；}

<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>

如果您需要更多定制的东西，只需稍微调整一下 css 和 html 结构:

const input = document.querySelector('input[type=number]')const 增量 = () =>{input.value = Number(input.value) + 1}const 递减 = () =>{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 外观:无；边距:0；}.数字输入{显示:弹性；}输入 {宽度:40px；边框:纯 1px 浅灰色；边界半径:0；文本对齐:居中}.微调{边框:纯 1px 浅灰色；}.spinner:悬停{背景:浅灰色；}.spinner:第一个孩子{边框半径:3px 0 0 3px；}.spinner:最后一个孩子{边界半径:0 3px 3px 0;}

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

这是一个带有 JQuery 的版本:

const input = $('input[type=number]')const 增量 = () =>{input.val(Number(input.val()) + 1)}const 递减 = () =>{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 外观:无；边距:0；}.数字输入{显示:弹性；}输入 {宽度:40px；边框:纯 1px 浅灰色；边界半径:0；文本对齐:居中}.微调{边框:纯 1px 浅灰色；}.spinner:悬停{背景:浅灰色；}.spinner:第一个孩子{边框半径:3px 0 0 3px；}.spinner:最后一个孩子{边界半径:0 3px 3px 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><div class="数字输入"><button class="spinner decrement">-</button><input type="number" name="Quantity[47]" value="0" class="qtyInputLoose" min="0" max="8"><button class="spinner increment">+</button>

I have some HTML/CSS that works perfectly on desktop.

It also works on mobile, but the up and down arrows for numerical selection on the input field do not display, forcing the user to "enter" the number manually. The client has requested these numerical spinner arrows are retained on mobile view.

There are a lot of questions about how to hide/disable spinners and even a few about how to retain the spinners, but these have no or incorrect answers and following these answers and suggestions has not resolved this issue.

        @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>

Platform:

iPad (iOS 12.5)

Browsers:

Google Chrome and Safari

Attempted solutions:

• opacity is set to 1 but this does not display the spinners (source).
• Setting moz-appearance: number-input; (and similar) doesn't display the spinners (source).
• Setting -webkit-appearance: inner-spin-button; doesn't display the spinners (source).
• Setting inputmode="numeric" on the HTML input element does not show spinners (source).

iPad simulators (for what they're worth) on PC on Firefox Inspector shows the spinner buttons, and Google Chrome Inspector they do NOT show the spinner buttons.

There is a comment here that

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

This no longer appears to be the case for Safari 12.1

How can I show these input spinner buttons on iPad display of the webpage?

解决方案

At some point it's hard and tricky to get a consistent result across the platforms for a native element like an input. For this reason, I would recommend you to re-create one that 'fake' the native behaviour by using some javascript. Here is a very basic example:

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>

If you need something more customised, simply adjust a little bit of css and html structure:

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>

Here is a version with 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>

这篇关于如何始终在移动设备和 iPad 上显示数字输入微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！