Question

我基本上想要使用javascript来拥有2个相互依赖的文本框。例如，如果我在textbox1中输入数字x，我希望textbox2立即用x * 2更新。如果我输入x到textbox2，我希望textbox1自动更新为x / 2。这些值将始终为数字。

编辑：所以这是我的html文件。任何人都可以给我一个暗示，为什么它不起作用？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $("#text1").keyup(function(){
            $("#text2").val($(this).val() * 2);
        });
        $("#text2").keyup(function(){
            $("#text1").val($(this).val() / 2);
        });        
    </script>
</head>
<body>
    <input type="text" name="text1" size=3 maxlength=6>
    <input type="text" name="text2" size=3 maxlength=6>
</body>
</html>

Answer 1

在非常简单的情况下，应该这样做（fiddle here）：

// in a <script>:
window.update = function() {
  var one = document.getElementById('one'),
      two = document.getElementById('two');    

  two.value = parseInt(one.value) * 2;
}

<!-- in your HTML: -->
<input id="one" type="text" onchange="update();" />
<input id="two" type="text" />

Answer 2

$("#textbox1").onkeyup(function() {
    $("#textbox2").val($(this).val() * 2);
});

$("#textbox2").onkeyup(function() {
    $("#textbox1").val($(this).val() / 2);
});

Answer 3

我现在无法测试你需要的确切代码，但基本的想法是在每个框上放置一个OnKeyUp事件并通过脚本修改另一个框（使用getElementById或无论你使用哪种方法）等）

如果其他人没有先达到目的，我会尝试将一些代码放在一起。

Answer 4

使用onchange事件或jquery更改回调来更新其他框。

Answer 5

在这种情况下，应该这样做：http://jsfiddle.net/du09jhpd/

window.update = function() {
  var one = document.getElementById('one'),
      two = document.getElementById('two');    

  two.value = parseInt(one.value) * 2;
}
window.update1 = function() {
  var one = document.getElementById('one'),
      two = document.getElementById('two');    

  one.value = parseInt(two.value) / 2;
}

Javascript根据另一个文本框的输入更新文本框

5 个答案: