JavaScript输入字段onChage/oncut

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，只是Plain HTML可以解决您的问题。 input 标签具有代码>最大属性设置输入的最小值和最大值。另外，您可以设置 step step 0.01。

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

Answer 2

您可以使用 onChange 事件或添加 event listerner 到输入字段和最小值，最大值以指定最大和最小数字。

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

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

使用 parsefloat（）因为您正在与floats打交道。

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

• 致电 onChange 方法
• else返回值-0.01; 返回float值
• parseInt（）返回整数value使用 parsefloat（）返回float阀
• 值-0 删除无用的值，如 01.11 to 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 4

有两个事件处理程序 limitrange（）绑定到输入事件， keepdot（）绑定到键盘事件（设置在捕获上，请注意，第三个参数为 true ）。 keepdot（）只需处理Firefox拒绝接受。键的方式即可。

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

它有两个工作。第一份工作是限制低于.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 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;
}