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

演示在这里。

---

更新（JSPfor循环）：

在您的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);
    });
});

在此处查看演示。

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

Answer 2

使用 jQuery 很简单：

<input type="text" name="t1" id="t1" value="" onkeypress="calculation()" />

<input type="text" name="converted" id="converted" value="" />

<script>
function calculation() {
   var price = 'here is your formula';
   $('#converted').val(price);
}
</script>