如何改变上升增量在HTML数字输入

How to change Uptick Increments in HTML Number Input

本文关键字：HTML 数字输入 何改变 改变      更新时间：2023-09-26

我有一个数字输入表单:

<input type='number' id='select-number'>Pick A number

我有以下问题:

1:默认增量为1(当您单击数字输入上的向上箭头时，每单击一次，它的增量为1)。我怎样才能改变这一点呢?我希望它上升0.1(十分之一)我怎么做呢?

2:其次，我有两个变量:

feet=true;
meters=false;

一个永远为真，另一个永远为假。我如何改变"max"属性(使用Javascript)基于这两个变量中的哪一个是真的?这两个变量来自如下代码:

<input type='radio' id='feet' name='unit_of_measurement'>Feet
<input type='radio' id='meters' name='unit_of_measurement'>Meters
<script>
feet=document.getElementById('feet').checked;
meters=document.getElementById('meters').checked;
</script>

如果变量"feet"为真，则输入的最大值(Id='select-number')需要为3。如果是米，则需要是8。

我怎么能做到(^)，我怎么能改变上升增量?谢谢你的帮助。

注意:仅限Javascript，请使用

1)要改变输入的步长，只需在input标签内使用step=".1"。

2)要改变无线电变化的最大值，添加一个onchange="change()"，设置最大值和/或步长基于检查

html 

<input type='radio' id='feet' name='unit_of_measurement' onchange="change()" checked>Feet
<input type='radio' id='meters' name='unit_of_measurement' onchange="change()">Meters

js 

function change() {
  feet = document.getElementById('feet').checked;
  meters = document.getElementById('meters').checked;
  selectNumber = document.getElementById('select-number');
  if (feet) {
      selectNumber.max = 300;
      selectNumber.step = 1;
  } else {
      selectNumber.max = 100;
      selectNumber.step = .3;
  }
};

默认的上升增量可以通过使用step属性来修改

<input type="number" name="quantity" step="0.1">

和任何属性都可以通过获取DOM元素的句柄来访问(set和get)。

oldValue = document.getElementById('#<id>').propertyName;  //get
document.getElementById('#<id>').propertyName = newValue;  //set
相关文章：