如何在每次按鍵后立即執行功能

Question

我的單位轉換器有問題。 我希望它在每次按鍵后立即執行convert()函數。 只有在按回車鍵或在其他位置單擊鼠標后， keyup和keydown才能起作用。 我希望它可以像GTranslator一樣同時工作。

JS

var text;
var number;
var index;
var index2;

const test = document.getElementById("userInputNumber");
test.addEventHandler("keypress", convert);


function convert() {
    text = document.getElementById("userInputNumber").value;
    number = parseFloat(text);
    determineUnit();
    convertUnit();
    document.getElementById("result").value = number;
}

function determineUnit() {
    index = document.getElementById("mySelect1").selectedIndex;
    if (index === 0) {
    number = number * 1000;
    } else if (index === 1) {
        number = number * 1;
    } else if (index === 2) {
        number = number * 0.01;
    } else {
        number = number * 0.001;
    }
}

function convertUnit() {
    index2 = document.getElementById("mySelect2").selectedIndex;
    if (index2 === 0) {
    number = number * 0.001;
    } else if (index2 === 1) {
        number = number * 1;
    } else if (index2 === 2) {
        number = number * 100;
    } else {
        number = number * 1000;
    }
}

    document.getElementById("Reset").reset();

的HTML

<form id="converter" onsubmit="return false"> 

        <input type="text" id="userInputNumber">

        <select id="mySelect1">
            <option value="kilometers">Kilometers</option>
            <option value="meters" selected>Meters</option>
            <option value="centimeters">Centimeters</option>
            <option value="millimeters">Millimeters</option>
        </select>

        <input type="text" id="result" disabled>

        <select id="mySelect2">
            <option value="kilometers">Kilometers</option>
            <option value="meters">Meters</option>
            <option value="centimeters">Centimeters</option>
            <option value="millimeters">Millimeters</option>
        </select>

      <button class="convertButton" onclick="convert()">Convert</button>

      <input type="reset" value="Reset">

    </form>

Answer 1

好的，我發現的最佳解決方案是在HTML中使用onkeydown="convert()" ，並且除了第一個數字外，該方法工作得很好，當我鍵入一個數字時，輸出結果會顯示NaN。 當我按回車鍵時，它會轉換，當我繼續輸入更多數字時，它就像魔術一樣工作。 我不明白為什么程序不會將第一個字符串轉換為數字。

Answer 2

我可以建議的解決方案是使用KeyPress

document.addEventListener('keypress', convert);

function convert(e) {
  //Your Code Here
}

如果您想檢查用戶按下了什么鍵，可以使用$``$ {e.code} ; 在轉換函數內。