Кастомизация поля input[type=number] или поля количество

В интернет много всяких решений, но часть из них обладают избыточной функциональностью, часть требует сторонние библиотеки, типа jQuery, а простые и лёгкие решения мне не попадались, это наверное потому что я искать не умею))) В общем как бы там ни было, пусть в интернете появится ещё одно решение, вдруг кому-то пригодится. Все подробности о том, как пользоваться в репозитории.
Артур Шевченко
Артур Шевченко
10 марта 2022, 23:29
modx.pro
4
1 090
+2
Поблагодарить автора Отправить деньги

Комментарии: 2

deleted
deleted
11 марта 2022, 00:33
+1
По-моему, самое простое решение:
<div x-data="{ qty: 1 }">
    <button @click.prevent="qty--" :disabled="qty < 2">−</button>
    <input type="number" name="count" value="1" x-model="qty" readonly>
    <button @click.prevent="qty++">+</button>
</div>
Используется alpine.js: alpinejs.dev/start-here

В корзине minishop:
<form class="ms2_form" method="post"
    x-data="{ qty: {$item.count} }"
    x-init="$watch('qty', () => { $root.dispatchEvent(new Event('submit', { bubbles: true })) })">
    <input type="hidden" name="key" value="{$item.key}"/>
    <button type="submit" name="ms2_action" value="cart/change" hidden></button>
    <button @click.prevent="qty > 0 && qty--">−</button>
    <input type="number" name="count" value="{$item.count}" x-model="qty" readonly/>
    <button @click.prevent="qty++">+</button>
</form>
    Артур Шевченко
    Артур Шевченко
    11 марта 2022, 00:43
    0
    Вот это просто
    <input type="number" value="1">
    Ну ещё класс надо подключить и экземпляр создать)))
    Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
    2