javascript - 如何使用 JavaScript 在按键时更新文本框

Question

有没有办法在每次按键时更新文本框的值？

我正在进行货币换算。因此，有两个文本框，一个供用户输入值，而另一个会在每次按键时自动显示转换后的金额。

我应该使用 for 循环吗？但是我应该循环什么？

下面的 for 循环中的文本框应该能够进行单独的行转换

<% for(int i=0; i<2; i++) { %>
 <td><input type="text" id= "amount" name="amount<%=i%>" /></td>

 <td><input type="text" id= "convertedAmount" name="convertedAmount<%=i%>" readonly/></td>
<%}%>

我应该如何开始尝试这项任务？

提前感谢您提供的任何帮助。

Answer 1

onkeyup最适合您的任务:

Type amount $: <input type='text' id='amount' onkeyup="updateConverted()" >
<br>
Converted: <input type='text' id='converted' >

JavaScript 函数:

function updateConverted() {
    var conversionRate = 1.5;
    document.getElementById('converted').value =
                       document.getElementById('amount').value * conversionRate;
}

Demo here .

---

更新(JSP for 循环):

对于 for 循环，您只需使用以下 jQuery 代码(无需更改 HTML):

$('input[name=amount]').each(function (_, value) {
    $(value).keyup(function () {
        var rate = 1.5;
        var convAmount = $(this).val() * rate;
        $(this).parent().next().children('input[name=convertedAmount]').val(convAmount);
    });
});

See demo here .

_{注意:您的 for 循环正在生成重复的 ID。如果可能，请避免使用它，因为它是无效的 HTML。}