How To Always Display Numerical Input Spinners On Mobile And Ipad

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 use

Solution 1:

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]')

constincrement = () => {
  input.value = Number(input.value) + 1
}
constdecrement = () => {
  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: 01px;
}

.spinner:hover {
  background: lightgrey;
}

<divclass="number-input"><inputtype="number"name="Quantity[47]"value="0"class="qtyInputLoose"min="0"max="8"><divclass="spinners"><buttonclass="spinner increment">&#9650;</button><buttonclass="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]')

constincrement = () => {
  input.value = Number(input.value) + 1
}
constdecrement = () => {
  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: 3px003px;
}

.spinner:last-child {
  border-radius: 03px3px0;
}

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

Here is a version with JQuery:

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

constincrement = () => {
  input.val(Number(input.val()) + 1)
}
constdecrement = () => {
  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: 3px003px;
}

.spinner:last-child {
  border-radius: 03px3px0;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><divclass="number-input"><buttonclass="spinner decrement">-</button><inputtype="number"name="Quantity[47]"value="0"class="qtyInputLoose"min="0"max="8"><buttonclass="spinner increment">+</button></div>

Solution 2:

I have been looking for so long to show arrows on Mobile Chrome when I realized that the operating system deals differently with inputs (popping up the keyboard and not showing arrows). I came across this post and I have improved the code to make that you can have many buttons in the same page but just one function to manage the increment/decrement of each. The final example is like in the picture below for smartphones.

To add a third button just make the input with id='3' and the button with plus sign with id='pb3' and the button with minus side with id='mb3' You do not need to change anything else

You can either use the onchange event or the onkeyup event to call imposeMinMax() function. Depending on your application. onkeyup works well only if you have a min<0 and max>0.

I have also added autoincrement input when the user keeps the button pressed. Visit this link for the autoincrement code.

functionimposeMinMax(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;
    }
  }
}

functionmodIn(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 --><linkhref="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"crossorigin="anonymous"><divclass='card'><divclass='card-body' ><h5class='card-title'>TEMPERATURE</h5><divclass='container'><divclass='row'><divclass='col-auto'style="width: 40%;"><label >Temprerature:</label></div><divclass='col-auto'><buttontype="button"class="btn btn-danger btn-sm signBut"id='mb1'onclick='modIn(this.id)'>-</button><inputtype="number"name='tempCalib'id='1'class='inNum'onchange='imposeMinMax(this)'value='0'max='6'min="-6"step="1"><buttontype="button"class="btn btn-danger btn-sm signBut"id='pb1'onclick='modIn(this.id)'>+   </button>&nbsp;°C
          </div></div><br><divclass='row'><divclass='col-auto'style="width: 40%;"><label>Hysteresis:</label></div><divclass='col-auto'><buttontype="button"class="btn btn-danger btn-sm signBut"id='mb2'onclick='modIn(this.id)'>-</button><inputtype="number"name='tempHyst'id='2'class='inNum'onchange='imposeMinMax(this)'value="1"max="4"min="-4"step="1"><buttontype="button"class="btn btn-danger btn-sm signBut"id='pb2'onclick='modIn(this.id)'>+</button>&nbsp;°C
          </div></div></div></div></div>

Solution 3:

You can try to check this example here for this