更新

Question

我有一个看起来像这样的输入表单：

<input type="number" value="0.00" step="0.05">

我找到了步进函数，从技术上解决了将增量值更改为0.05而不是默认值1的问题。但是，我没有找到可以在不更改有效输入的情况下更改增量的解决方案。

输入可以取任何数字，但最常用的值将以0.05为增量。是否有解决方法？使用JavaScript解决方案也非常受欢迎。

非常感谢您！

编辑：在HTML表单标签中添加nonvalidate可以解决此问题。现在按下按钮，使用我想要的增量，但是当我需要指定比步骤更准确的值时，表单仍然接受这些值。

<form action="/run" novalidate>
  <input type="number" value="0.00" step="0.05">
  <input type="submit">
</form>

Answer 1

在表单标记中使用nonvalidate将摆脱验证，但保留由step实现的增量。

Answer 2

更新

“我确实向表单标签添加了nonvalidate。它让我现在做我想做的事情，但这可能不是最佳解决方案。”

如果您不希望novalidate对表单进行“破坏”，则有2种表单：

表格A [无操作或方法]
- 所有用户交互和计算都在这里。
- 可以修改所有输入，而不必担心表单中的内置验证。
表格B [设置操作和方法可选目标]
- “提交”按钮位于
- 为要提交的表单A上的每个值添加一个隐藏的输入，并确保每个输入都有名称属性和值。
- 任何客户端验证都应在此处完成。

使用该设置，您将需要一个事件onbeforesubmit，以便在表单A的值提交到服务器之前可以将其转移到表单B。不幸的是，我不认为它是一个标准，但是要模拟它很简单：

 formA.onsubmit = b4Submit;

 function b4Submit(event) {

   hidden_Input_In_FormA.value = number_Input_With_Crazy_Step_In_FormA.value

   return true;
 }

因此，这个人为设计的示例显示了一个事件处理程序，该事件处理程序从一种形式获取值，然后将其存储在另一种形式中。接下来，它继续提交任何数据。这是由于回调返回了true，如果应返回false，则回调函数本身将死亡，submit事件也将随之消失。

该演示已更新为可以执行上述操作。注意：没有novalidate属性在使用中。第二种形式（形式B或form#tx）是从隐藏的输入发送文本。像-103.002684109这样的数字如果来自<input type='number'>，但来自文本或隐藏的输入，则无效，它只是文本（尽管我相信大多数表单控件中的实际数据实际上是字符串而不是数字）。 / p>

“输入可以采用任何数字，但最常用的值将以0.05为增量。是否有解决方法？欢迎使用JavaScript解决方案。” < / p>

您可以在任何标签AFAIK上更改所需的任何属性。用普通的JavaScript语法很简单：

 Object.property = "string"

对象：引用的<element>标记

属性：当您引用 standard 属性（如属性）时，该属性即成为属性。

字符串：该值必须是字符串

这是以编程方式更改 standard 属性的基本方法：

<a href="https://stackoverflow.com"></a>
var obj = document.querySelector('a');
obj.href = "https://google.com"; // <a href="https://google.com"></a>

以下演示使用：

演示

演示可以将响应发送到实时测试服务器，该响应发送到iframe以查看

var ui = document.forms.ui;
var tx = document.forms.tx;
var u = ui.elements;
var x = tx.elements;
var D = u.digit;
var C = x.cache;
var lo = u.min;
var hi = u.max;
var inc = u.step; // I think this what you specificly
var t = u.type;
var chg = u.change;

chg.onclick = chgAttr;
tx.onsubmit = cacheVal;

function chgAttr(e) {
  D.min = lo.value;
  D.max = hi.value;
  D.step = inc.value;
  D.type = t.value;
}

function cacheVal(e) {
  C.value = D.value;
  return true;
}

body {
  font: 400 16px/1.5 'Consolas'
}

#digit {
  margin-right: 15px;
}

input,
output,
button,
select,
option,
label {
  display: inline-block;
  font: inherit
}

select {
  padding: 3px 5px
}

[type='submit'] {
  float: right;
}

<!doctype html>
<html>

<head>
  <title></title>
  <meta charset='utf-8'>
  <style></style>
</head>

<body>
  <form id='ui' oninput='out.value = digit.value'>

    <fieldset>
      <legend>Click Button to Change Input</legend>
      <input id='digit' min='' max='' step='' type='number'>
      <button id='change' type='button'>CHANGE</button>
      <output id='out' for='digit'></output>
    </fieldset>

    <fieldset>
      <legend>Attribute Adjustments</legend>
      <input id='min' min='-2147483648' max='2147483648' type='number' placeholder='min'>
      <input id='max' min='-2147483648' max='2147483648' type='number' placeholder='max'>
      <input id='step' type='number' placeholder='step'>

      <label for='type'>Type: 
    <select id='type'>
      <option>number</option>
      <option>text</option>
      <option>range</option>
      <option>hidden</option>
      <option>color</option>
      <option>time</option>
    </select>
    </label>

    </fieldset>

  </form>
  <form id='tx' action='https://httpbin.org/post' method='post' target='response'>
    <input id='cache' name='cache' type='hidden'>
    <input type='submit'>
  </form>
  <iframe src='about:blank' name='response'></iframe>

  <script></script>
</body>

</html>

在不更改有效值的情况下更改HTML数字输入的增量值

2 个答案:

更新

演示