Jquery - Input type number, step interval, not considering value in textbox

Ans101
August 26, 2024
165 views
0 votes
2 Answers

I’ve a textbox, in which when user clicks top arrow, the value in textbox should increment by 10.
For example, if the textbox value is 12, when user press up arrow, it should show 22, again pressing the up arrow, it should show 32 etc. While clicking down arrow, it should substract 10, so the value that displayed should be 22 (32-10).

<input type="number" id="txtIncrementBy10" step="10" min="0" name="txtIncrementBy10" value="0" />

I provided the step as 10, for this functionality. It is incremented +10 each time user presses up arrow. But the issue I have is it not adding to the value in textbox. Like, if the value in textbox is 33, so pressing up arrow, it shows 40, instead of 43.

Is there a way, for it to add +10 to the value in textbox?

JSFiddle

I have set the interval to 10, but as mentioned before, when pressing up/down arrow, it is just incrementing value as 10, 20, 30… etc. I want it to add +10 to the value in the textbox instead.

Answers

Try below code. Hope this could help you.

const inputField = document.getElementById("txtIncrementBy10");

inputField.addEventListener("keydown", function (event) {
  const currentValue = inputField.valueAsNumber || 0;

  if (event.key === "ArrowUp") {
    event.preventDefault();
    inputField.value = currentValue + 10;
  } else if (event.key === "ArrowDown") {
    event.preventDefault();
    inputField.value = currentValue - 10;
  }
});

<input type="number" id="txtIncrementBy10" name="txtIncrementBy10" value="0" />

Please let me know if this could help you.

You will need custom +/- buttons, and some javascript. Something like this:

document.querySelectorAll('.number-input').forEach(el => {
  const input = el.querySelector('input');
  const step = Number(input.dataset.step) || 1;
  el.querySelector('.number-input-btn-plus')?.addEventListener('click', () => {
    const value = Number(input.value) + step;
    const max = parseFloat(input.getAttribute('max'));
    if (!isNaN(max) && value > max) {
      input.value = max;
    } else {
      input.value = value;
    }
  });
  el.querySelector('.number-input-btn-minus')?.addEventListener('click', () => {
    const value = Number(input.value) - step;
    const min = parseFloat(input.getAttribute('min'));
    if (!isNaN(min) && value < min) {
      input.value = min;
    } else {
      input.value = value;
    }
  });
});

.number-input {
  --button-width: 16px;
  position: relative;
  display: inline-flex;
  .input {
    padding-right: var(--button-width);
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      appearance: none;
      margin: 0;
    }
  }
}

.number-input-btn {
  position: absolute;
  right: 0;
  width: var(--button-width);
  height: 50%;
  &:before {
    --arrow-width: calc(0.4 * var(--button-width));
    content: '';
    position: absolute;
    border-left: calc(0.5 * var(--arrow-width)) solid transparent;
    border-right: calc(0.5 * var(--arrow-width)) solid transparent;
    left: calc(50% - 0.5 * var(--arrow-width));
    top: calc(50% - 0.5 * var(--arrow-width));
  }
}

.number-input-btn-plus {
  top: 0;
  &:before {
    border-bottom: var(--arrow-width) solid;
  }
}

.number-input-btn-minus {
  bottom: 0;
  &:before {
    border-top: var(--arrow-width) solid;
  }
}

<label class="number-input" aria-label="Input number">
  <input type="number" data-step="10" min="0">
  <button type="button" class="number-input-btn number-input-btn-plus" aria-label="Plus"></button>
  <button type="button" class="number-input-btn number-input-btn-minus" aria-label="Minus"></button>
</label>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Input type number, step interval, not considering value in textbox

Answers