Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Вызвать клик по стрелкам input[type="number"] (https://javascript.ru/forum/events/75210-vyzvat-klik-po-strelkam-input%5Btype%3D-number-%5D.html)

naplekov 13.09.2018 14:47

Вызвать клик по стрелкам input[type="number"]
 
Есть код
<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 (), но не как не могу разобраться можно ли его сюда применять и главное как?

Nexus 13.09.2018 15:09

Цитата:

Сообщение от naplekov
как вызвать клик по стрелкам внутри input

Скорее всего никак.

<input type="number" class="input-text" value="0" min="0" max="" id="input">
<span id="increment">Больше</span>
<span id="decrement">Меньше</span>
<script>
(function() {
    const input = document.querySelector('#input');
    [].forEach.call(document.querySelectorAll('#increment,#decrement'), function(node, i) {
        node.addEventListener('click', function() {
            const step = (input.step || 1) * (!i ? 1 : -1);
            let val = +input.value + step;

            if ('max' in input && input.max.length && val > input.max)
                val = input.max;
            else if ('min' in input && input.min.length && val < input.min)
                val = input.min;

            input.value = val;
        });
    });
})();
</script>

naplekov 13.09.2018 15:24

Цитата:

Сообщение от Nexus
Скорее всего никак.

Править код нет возможности. реализовывать отдельными кнопками не получится.

Nexus 13.09.2018 15:28

naplekov, зачем вам нажимать на стрелочки инпута?

j0hnik 13.09.2018 15:31

naplekov,
тогда value меняйте
<input type="number" class="input-text" value="0" min="0" max="">
<script>
var inp = document.querySelector('.input-text')
inp.value++; //или --
// если что то прязано
// inp.dispatchEvent(new Event("change")); // или input
</script>

naplekov 13.09.2018 16:09

Цитата:

Сообщение от Nexus
зачем вам нажимать на стрелочки инпута?

Что бы превратить его в checkbox. по первому клику добавить по второму убавить
Цитата:

Сообщение от j0hnik
тогда value меняйте

Я так уже пробовал. там все не так просто. при клике в коде меняется еще и атрибуты других блоков.

j0hnik 13.09.2018 19:12

Цитата:

Сообщение от naplekov
Я так уже пробовал. там все не так просто. при клике в коде меняется еще и атрибуты других блоков.

Строку 6 пробовали раскомментировать? если не сработает то так попробуйте.
inp.dispatchEvent(new Event("input"));

j0hnik 13.09.2018 19:20

naplekov,
всякий раз когда будите менять value вызывайте событие
//это
inp.dispatchEvent(new Event("input"));
//или это
inp.dispatchEvent(new Event("change"));

naplekov 14.09.2018 11:45

Цитата:

Сообщение от j0hnik (Сообщение 494597)
naplekov,
всякий раз когда будите менять value вызывайте событие
//это
inp.dispatchEvent(new Event("input"));
//или это
inp.dispatchEvent(new Event("change"));

Цитата:

Сообщение от j0hnik
inp.dispatchEvent(new Event("change"));

Спасибо! Именно это и сработало!

Nexus 14.09.2018 16:15

naplekov, полагаю это ваш "отзыв"?
Цитата:

Вы пишите "никак" - это выход. предлагайте альтернативы или не пишите вовсе
Если не писать вовсе, то ваш вопрос так бы и остался нерешенным, поскольку кликнуть на нативную стрелочку, которая имеется у input[type="number"] невозможно. В этом случае вы бы остались недовольны тем, что вас просто проигнорировали.

Как альтернативу я вам предложил на странице разместить кастомные контроллеры, вам они не подошли.
В текущей теме был решен вовсе не изначальный вопрос "как кликнуть по стрелочке", а "как изменить значение инпута и вызвать на нем соответствующие события", что совсем не одно и тоже.

Не вижу причин для недовольства моим ответом, тем не менее, прошу прощения за подобный ответ.
Всего наилучшего.


Часовой пояс GMT +3, время: 20:45.