Javascript 输入字段 onchage/oninput

Question

请帮忙，如何在javascript中进行这样的输入？ 可以输入的最小数字 = 0.01 可以输入的最大数字 = 94.99 如果超过最小/最大，它将自动返回到最小/最大的默认数字。 同时，如果您输入数字 01.21，数字将自动变为 1.21

感谢您花时间回答，并提供指导。

我想创建一个与此类似的输入字段

我试过这样但它不起作用

 function minmax(value, min, max) { if (parseInt(value) < 0.01 || isNaN(value)) return 0.01; else if (parseInt(value) > 94.99) return 94.99; else return value; }

 <input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value = minmax(this.value, 0.01, 94.99)" />

Answer 1

您可能甚至不需要为此使用 JavaScript，只需纯 HTML 即可解决您的问题。 input标签具有设置输入的最小值和最大值的min和max属性。 此外，您可以将输入的step长设置为 0.01。

这应该可以解决您在前端的问题。 但请注意，这不足以确保后端接收到的数据（如果是这种情况）符合您的规范，因为恶意用户可以更改您的页面并发送数据，甚至绕过前端完全地。 因此，后端还应检查接收到的数据格式是否正确。

Answer 2

您可以为此使用onchange事件或将事件侦听器添加到输入字段和 min, max 以指定最大和最小数量。

<input id="input1" type="number" onchange="minmax()" min="0.01" max="94.99">

然后，您可以使用 javascript 使用 if 条件将用户输入的值与最小值和最大值进行比较。 如果用户输入的值无效，只需将输入字段值替换为最小值或最大值！

使用parseFloat()因为您正在处理浮点数。

function minmax() {
   let inp_field = document.getElementById("input1");

   let val = parseFloat(inp_field.value),
       min = parseFloat(inp_field.min),
       max = parseFloat(inp_field.max);

   if (val < min) {
      inp_field.value = min;
   } else if (val > max) {
      inp_field.value = max;
   } else {
      inp_field.value = val;
   }
}

对于最后一部分， parseFloat将通过清除前导零自动为您执行此操作。

Answer 3

有两个事件处理程序limitRange()绑定到输入事件， keepDot()绑定到 keyup 事件（在捕获时设置，注意第三个参数是true ）。 keepDot()只是处理 Firefox 拒绝接受. 钥匙。

x.addEventListener('input', limitRange);
x.addEventListener('keyup', keepDot, true);

它有两个工作。 第一项工作是限制低于 0.01 或高于 94.99 的输入

this.value = +v < .01 ? '.01' : +v > 94.99 ? '94.99' : v;

第二项工作是删除任何前导零

 this.value = v.replace(/^0+/, '');

 const x = document.querySelector('#x') x.addEventListener('input', limitRange); x.addEventListener('keyup', keepDot, true); function limitRange(e) { let v = this.value; this.value = +v < 0.01 ? '0.01' : +v > 94.99 ? '94.99' : v; this.value = this.value.replace(/^0+(?=\d)/, '') } function keepDot(e) { if (e.key === '.') { this.value = this.value + '.' } }

 <input id='x' type='number' min='.01' max='94.99' step='any'>

Answer 4

• 调用onchange方法
• else return value - 0.01; 返回浮点值
• parseInt()返回整数值 使用parseFloat()返回浮子阀
• value - 0删除无用的 0 值，如01.11到 1.11`

 function minmax(value, min, max) { if (parseFloat(value) < 0.01 || isNaN(value)) return 0.01; else if (parseInt(value) > 94.99) return 94.99; else return value - 0; }

 <input type="text" name="textWeight" id="txtWeight" maxlength="5" onchange="this.value = minmax(this.value, 0.01, 94.99)" />

Answer 5

您好，谢谢您的提问，解决方案很简单，请在下面的代码中试用一次。

<input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value = minmax(this.value, 0.01, 94.99)" />

在这里您需要使用parseFloat()因为您使用的是浮点值。

function minmax(value, min, max) {
  if ((parseFloat(value) < 0.01 && value.length > 1) || isNaN(value))
    return 0.01;
  else if (parseFloat(value) > 94.99)
    return 94.99;
  else return value;
}