Вызвать клик по стрелкам input[type=“number”]

185

24 декабря 2018, 20:10

Есть код

<input type="number" class="input-text" value="0" min="0" max="">

как вызвать клик по стрелкам внутри input верх и вниз (прибавить и убавить)

нашел код такой:

<button id="elem" onclick="alert('Клик');">Автоклик</button>
<script>
  var event = new Event("click");
  elem.dispatchEvent(event);
</script>

Но как его применить именно к стрелкам блока input?

в jqvery есть событие .keyup (), но не как не могу разобраться можно ли его сюда применять и главное как?

Answer 1

let [n,r] = [document.getElementById("numPeople"),document.getElementById("result")]; 
 
n.addEventListener("input", (e) =>  r.innerHTML += "события input вызвалось <br/>"); 
 
n.addEventListener("keyup", (e)  => r.innerHTML += "события keyup вызвалось <br/>"); 
 
n.addEventListener("change", (e) =>  r.innerHTML += "события change вызвалось <br/>");

input { 
    font-size: 1.2em; 
    border-radius: 4px; 
    padding: 4px; 
}

<input id="numPeople" type="number" min="0" value="" placeholder="Выбери число" /> 
 
<div id="result"></div>

Answer 2

У input[type=number] есть методы stepUp() и stepDown(), которые как раз и отвечают за увеличение/уменьшение значения на величину шага. Эти методы не работают в IE, но ведь там и стрелок нет.

var minus = document.getElementById('minus'), 
    plus = document.getElementById('plus'), 
    input = document.getElementById('input'); 
     
minus.addEventListener('click',function(){ 
  input.stepDown(); 
}); 
plus.addEventListener('click',function(){ 
  input.stepUp(); 
});

<button id="minus">-</button> 
<input id="input" type="number" min="0" max="200" step="5" /> 
<button id="plus">+</button>

Или на JQery

$('.custom-number button').click(function(){ 
  if($(this).is('.plus')){ 
    $(this).siblings('input')[0].stepUp(); 
  }else{ 
    $(this).siblings('input')[0].stepDown(); 
  } 
})

/*скрыть стандартные стрелки*/ 
[type=number]::-webkit-outer-spin-button, 
[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="custom-number"> 
  <button class="minus">-</button> 
  <input type="number" min="0" max="200" step="5" /> 
  <button class="plus">+</button> 
</div>