如何始终在移动设备和 iPad 上显示数字输入微调器
Posted
技术标签:
【中文标题】如何始终在移动设备和 iPad 上显示数字输入微调器【英文标题】：How to always display numerical input spinners on mobile and iPad 【发布时间】：2021-07-09 11:57:49 【问题描述】：我有一些 html/CSS 可以在桌面上完美运行。
它也适用于移动设备，但输入字段上用于数字选择的向上和向下箭头不显示，迫使用户手动“输入”数字。客户已要求将这些数字微调箭头保留在移动视图上。
有很多关于how to hide/disable spinners 甚至a few 关于如何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)
浏览器：
谷歌浏览器和 Safari
尝试的解决方案：
不透明度设置为 1，但这不会显示微调器 (source)。 设置moz-appearance: number-input;（和类似设置）不会显示微调器 (source)。
设置 -webkit-appearance: inner-spin-button; 不显示微调器 (source)。
在 HTML 输入元素上设置 inputmode="numeric" 不会显示微调器 (source)。
PC 上的 Firefox Inspector 上的 iPad 模拟器（物有所值）显示微调器按钮，而 Google Chrome Inspector 不显示微调器按钮。
有评论here那个
在 firefox 和 safari 中，它的默认功能是始终显示它。
Safari 12.1 似乎不再是这种情况
如何在网页的 iPad 显示屏上显示这些输入微调器按钮？
【问题讨论】：
在某些时候，对于像input 这样的原生元素，要跨平台获得一致的结果是困难且棘手的。为什么不使用button 之类的this example 重新创建它？
@johannchopin 是的，我希望避免在系统上添加一层 JS，但这似乎确实有效，我想我不得不承认 JS 是解决这个问题的方法。随意将代码粘贴到答案;-)
【参考方案1】：
您可以尝试在此处查看this example
【讨论】：
谢谢，但这并不能解决问题。我已经相应地更新了问题。 那么这个答案可能会根据您更新的问题对您有所帮助***.com/a/51747587/8461587【参考方案2】：在某些时候，对于像input 这样的原生元素，要在整个平台上获得一致的结果是困难且棘手的。出于这个原因，我建议您使用一些 javascript 重新创建一个“伪造”本机行为的程序。这是一个非常基本的例子：
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">▲</button>
<button class="spinner decrement">▼</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>【讨论】：
这可行，但在非 ipad 样式上，这会产生两组箭头 理想情况下，我会寻找具有 [-][number][+] 样式的东西，但如果它必须是 JS，那么我确信有很多选择可供我探索。我的问题实际上是关于原生 CSS 是否可以实现这种统一性 @Martin 我添加了一个带有[-][number][+] 设计的自定义示例；) js 脚本部分仍然相同。
@Martin 这个答案看起来不错，可以验证吗？ :)
您好，是的，前几天我快速浏览了一下，它看起来确实很有希望，但我还不能回到这个项目，但我会回来的一两天，将整理这个松散的结局，再次感谢您的帮助:-)【参考方案3】：
当我意识到操作系统对输入的处理方式不同（弹出键盘而不显示箭头）时，我一直在寻找在 Mobile Chrome 上显示箭头。我遇到了这篇文章，我改进了代码，使您可以在同一页面中拥有许多按钮，但只有一个函数来管理每个按钮的增量/减量。最后一个示例如下图所示，适用于智能手机。
要添加第三个按钮，只需使用id='3' 输入，用id='pb3' 输入加号按钮，用id='mb3' 输入减号按钮
您无需更改任何其他内容
您可以使用onchange 事件或onkeyup 事件来调用imposeMinMax() 函数。取决于您的应用程序。 onkeyup 只有当你有一个 min0 时才能正常工作。
当用户按住按钮时，我还添加了自动增量输入。访问this link获取自动增量代码。
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> °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> °C
</div>
</div>
</div>
</div>
</div>【讨论】：
这看起来可能正是我正在寻找的，当我回到那个项目时，我会尝试你的代码。谢谢。 是的，基本上好处是您可以添加任意数量的按钮和输入。以上是关于如何始终在移动设备和 iPad 上显示数字输入微调器的主要内容，如果未能解决你的问题，请参考以下文章
为啥这个脚本不能在 android、iphone、ipad 等移动设备上运行？