如何解决如何始终在移动设备和 iPad 上显示数字输入微调器
我有一些 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
尝试的解决方案:
- opacity 设置为 1,但这不会显示微调器 (source)。
- 设置
moz-appearance: number-input;
(和类似的)不会显示微调器 (source)。 - 设置
-webkit-appearance: inner-spin-button;
不会显示微调器 (source)。 - 在 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 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',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>
当我意识到操作系统对输入的处理方式不同(弹出键盘而不显示箭头)时,我一直在寻找在 Mobile Chrome 上显示箭头的方法。我遇到了这篇文章,我改进了代码,使您可以在同一页面中有多个按钮,但只有一个功能来管理每个按钮的递增/递减。最后一个例子就像下图中的智能手机一样。
要添加第三个按钮,只需输入 id='3'
,加号按钮 id='pb3'
和减号按钮 id='mb3'
您不需要更改任何其他内容
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' onkeyup='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' onkeyup='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>
您可以尝试在这里查看this example
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。