0

Есть код

<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 (), но не как не могу разобраться можно ли его сюда применять и главное как?

2 ответа 2

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>

7
  • ну такое. Скрипт срабатывает при клике в любом месте инпута. Может сюда подойдет событие change? Не пробовали?
    – Dmytro
    13 сен 2018 в 17:18
  • @Дмытрык упс про это не знал сейчас решу
    – Randall
    13 сен 2018 в 17:19
  • change is working. Только что проверил
    – Dmytro
    13 сен 2018 в 17:22
  • @Дмытрык все работает можете проверить
    – Randall
    13 сен 2018 в 17:36
  • ТС же хотел вызвать клик по стрелкам, а не просто обработчики событий добавить.
    – Diskyp
    14 сен 2018 в 3:09
1

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.