Javascript - Номер приращения в форме

Question

Я просто пытаюсь увеличить число в форме.Это работает, но вход большой, пытался измерить без удачи.И я не хочу увеличения / уменьшения внутри поля ввода.Если поменять поле на текст, я получу правильный размер и не буду поднимать / опускать.Но приращение не работает.

Есть ли более простой способ.Также, когда я помещаю внутрь тег <form>, кнопка плюс минус не работает.

function HaFunction() {
  document.getElementById("HNumber").stepUp();
}

function HmFunction() {
  document.getElementById("HNumber").stepDown();
}

Number: <input type="number" id="HNumber" class=verd15 value="0">
<span class=verd13>
  <button onclick="HaFunction()"><b>+</b></button>
  <button onclick="HmFunction()"><b>-</b></button>
</span>

Answer 1

Вы можете написать свою собственную функцию, которая увеличивает число при вводе текста.

Если у вас есть форма, убедитесь, что ваши кнопки используют type="button".По умолчанию это type="submit", поэтому, нажав на кнопку, вы отправите форму, и вы перезагрузите страницу.

function addToInput(element, amount) {
  var val = parseInt(element.value, 10) || 0;
  val += amount;
  element.value = val;
}

function HaFunction() {
  addToInput(document.getElementById("HNumber"), 1);
}

function HmFunction() {
  addToInput(document.getElementById("HNumber"), -1);
}

<form>
  Number: <input type="text" id="HNumber" class=verd15 value="0">
  <span class=verd13>
    <button type="button" onclick="HaFunction()"><b>+</b></button>
    <button type="button" onclick="HmFunction()"><b>-</b></button>
  </span>
</form>

Answer 2

Вы можете уменьшить ввод с помощью CSS:

<input style="width:40px" type="number" id="HNumber" class=verd15 value="0">

Надеюсь, это помогло