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;
}