JS Appuis en continu sur un bouton pour incrémenter.

Bonjour,

Donc pour diverses raison je souhaite créer 2 bouton qui vont soit augmenter la valeur d'un input soit la diminuer. De 1 en 1 en laissant le clique enfoncé mais aussi en cliquant 1 fois.

<button onclick="down1()">-</button>

function down1() {
casenb1.value = parseInt(Number(casenb1.value))-1;
}

Comment rendre le bouton actif au click laissé appuyé ? (ce qui éviterait de cliqué 54 fois pour obtenir le chiffre 54 )

Cordialement
Jérôme

Salut,

ça tombe bien, je viens de coder ce truc fraichement avec ce jeu d'échecs.

Donc, sur le CodePen, on voit un bouton "next" et un bouton "play".

Le bouton "next" appellera la fonction principale une fois (en version simplifiée ici) :

nextButton.onclick = () => {
  move(game, i, frame)
  i++
}

Le bouton "play" appellera régulièrement cette même fonction avec un compteur de temps pour limiter le nombre des appels, sinon les fonctions s'enchaineraient avec une impression de rendu instantané pour l'utilisateur :

playButton.onclick = () => {
  move(game, i, frame2)
  i++
  playGame = setInterval(() => {
    move(game, i, frame2)
    i++
  }, frame2 * 2 + 200)
}

Dans cas c'est un peu différent mais ça reste globalement le même principe, vous devrez simplement utiliser la fonction JavaScript intégrée setTimeout(), que vous devrez lier avec les événements "keydown" et "keyup".
Modifié par Olivier C (16 Jun 2023 - 20:13)

Ok merci.
çà deviens trop compliqué pour moi dommage.

Cordialement
Jérôme

Attendez, il faut voir... ce serait pour quel cas d'utilisation ?

Un input de type range ne serait-il pas plus indiqué dans ce cas de figure ?

C'est simple j'ai une case (input) dans laquelle l'utilisateur peu écrire une valeur numérique.
Ou avec 1 bouton augmenter la valeur qui commence a 0 par palier de 1.
Mais si l'utilisateur veut commencer au chiffre 14 dans la case (input) et qu'il veut l'augmenter a 114. Il va devoir cliquer 100 fois de suite.

Il faudrait que le bouton augmente la valeur de 1 par click. ou plusieurs fois 1 en laissant le bouton appuyé.

Cdt Jérôme

Bonjour,

Avec un <input type=number>, on peut soit cliquer sur les flèches (qui apparaissent automatiquement à droite de l'input quand on clique dedans) soit entrer directement un nombre. Et si on clique sur les flèches en laissant le bouton appuyé, ça augmente (ou diminue le nombre). Ça me semble être exactement ce que tu veux.

Amicalement,

Bonjour,

Je sait bien. Mais malheureusement même en utilisant ce qui suit, sur tablette les flêches n'apparaissent pas. Sur pc c'est bon.

input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
}

Cdt Jérôme
Modifié par Jerome87 (17 Jun 2023 - 13:12)

Cette question rejoint votre sujet précédent sur ce même forum où vous aviez cette préoccupation. Mais on pourrait aussi formuler différemment : pourquoi faudrait-il une flèche sur mobile alors que l'expérience utilisateur n'est pas la même ? Les interfaces proposées sur desktop et sur mobile étant différentes ?