Início / coding / Perguntas / 78664128
Accepted
Luke Vo
Asked: 2024-06-25 02:39:05 +0800 CST

Posso fazer com que as setas de uma entrada de número HTML saltem de maneira diferente do atributo step?

  • 772

Eu tenho um <input type="number" step="1">elemento para escolher o tamanho da fonte. No entanto, dado o contexto de desenho em uma tela grande, alterar o número para 1 é quase imperceptível. Seria mais conveniente para os usuários se eles pudessem subir ou descer 5 ou 10 cada vez que clicassem na seta.

insira a descrição da imagem aqui

Ainda preciso manter o stepatributo em 1 porque a entrada deve permanecer válida mesmo com valores refinados. Existe uma maneira de conseguir esse comportamento, como o jumpatributo abaixo (pseudo). Também estou aberto a soluções Javascript, mas no AFAIK não existe tal evento para quando o usuário clica nas setas.

<input type="number" min="1" max="1000" step="1" jump="5" value="100" />

javascript

1 respostas

  1. Best Answer

    Você poderia tentar o seguinte: O inputevento verifica se a alteração no valor corresponde ao valor do passo e ajusta-o pelo valor do salto de acordo.

    Editar: Neste caso, para responder ao seu comentário usaremos um sinalizador e adicionaremos novamente o keydownevento.

    Adicione uma condição ao ouvinte de evento de entrada para evitar esse comportamento indesejado caso você altere manualmente o valor

    document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('input[type="number"][min="1"][max="1000"][step="1"]');

  const jump = parseInt(input.getAttribute('jump'), 10);
  let previousValue = parseInt(input.value, 10);
  let isManualChange = false;

  input.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
      event.preventDefault();
      const currentValue = parseInt(input.value, 10);

      if (event.key === 'ArrowUp') {
        input.value = currentValue + jump;
      } else if (event.key === 'ArrowDown') {
        input.value = currentValue - jump;
      }

      previousValue = parseInt(input.value, 10);
      isManualChange = false;
    } else {
      isManualChange = true;
    }
  });

  input.addEventListener('input', (event) => {
    const currentValue = parseInt(input.value, 10);
    const step = parseInt(input.getAttribute('step'), 10);

    if (!isManualChange && Math.abs(currentValue - previousValue) === step) {
      if (currentValue > previousValue) {
        input.value = previousValue + jump;
      } else {
        input.value = previousValue - jump;
      }
    }

    previousValue = parseInt(input.value, 10);
  });
});
    <input type="number" min="1" max="1000" step="1" jump="5" value="100" />

    • 2

relate perguntas