Как ввести минимальное и максимальное значения в поле ввода

Question

Хочу ежедневно фиксировать минимальную и максимальную цену акций разных компаний. Я пытаюсь использовать этот тег

<input type="number" name="number" placeholder="minprice">

<input type="number" name="number" placeholder="maxprice">

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

Что нужно включить или изменилось?

Answer 1

Вы можете прочитать первое значение minPrice из поля ввода и очистить значение, чтобы принять второе значение maxPrice. Используя счетчик, вы узнаете, что к чему.

ПРИМЕЧАНИЕ. Это будет работать только для первых 2 кликов. Вы можете настроить функцию в соответствии с вашими требованиями.

var btn = document.getElementById("save-btn");
var minPrice, maxPrice;
var count = 0;
btn.onclick = function() {
  var price = document.getElementById("share-price");
  count += 1;
  if (count == 1) {
    minPrice = price.value;
    price.value = '';
    console.log('minPrice', minPrice)
  } else if (count == 2) {
    maxPrice = price.value;
    price.value = '';
    price.setAttribute("disabled", true);
    btn.setAttribute("disabled", true);
    console.log('maxPrice', maxPrice)
  }
}

<input type="number" placeholder="Enter price" id="share-price" />
<button id="save-btn">Save</button>

Answer 2

Вы можете использовать HTML min Атрибут , ваши теги должны выглядеть следующим образом

<input type="number" name="number" placeholder="minprice" min="1" >

<input type="number" name="number" placeholder="maxprice" max="5">

читать документы здесь min и max

Answer 3

Вы не можете иметь 2 значения в одном входе типа "число". Вы можете поместить оба значения на входе типа «текст» и ограничить с помощью javascript на клавиатуре или клавише, какие символы могут быть введены в этот ввод. так что места для ошибок пользователя меньше. А затем за кадром возьмите оба значения и объедините их так, как вы хотите или нуждаетесь.

Answer 4

Вы можете использовать min и max.

<form>
<input type="number" name="number" placeholder="minprice" min="5" />
<input type="number" name="number" placeholder="maxprice" max="40" />
<input type="submit" name="Send" /> 
</form>