Question

我一直在为此尝试不同的选择，但作为一个 JS 初学者，我遗漏了一些我在文献中找不到的东西，因此感谢您的帮助。

我只想显示两个文本输出/输入框。当焦点在一个上时，它接受输入，另一个字段成为结果的输出。如果我将焦点转移到另一个框，它现在允许输入，另一个框显示转换后的结果。

初始状态：

<label for="">Fahrenheit: </label><input type="textbox" name="far"></input><br>
<label for="">Celsius: </label><input type="textbox" name="cel"></input><br>

关注华氏度将状态变为：

<label for="">Fahrenheit: </label><input type="textbox" name="far"></input><br>
<label for="output">Celsius: </label><input type="textbox" name="cel"></input><br>

关注摄氏将状态变为：

<label for="output">Fahrenheit: </label><input type="textbox" name="far"></input><br>
<label for="">Celsius: </label><input type="textbox" name="cel"></input><br>

是否可以这样做，无论哪个字段正在获取输入，另一个都会显示转换结果的输出？如果没有，做我想做的事情最接近的方法是什么？

Answer 1

请参阅下面的内嵌评论：

// Put references to the two temp fields in an array:
let tempFields = [document.getElementById("f"), document.getElementById("c")];

// Used later to store reference to inputs
let input = null;
let output = null;

// Set up one event handler on a common acnestor
// of the two input elements that trigger events
document.querySelector(".temps").addEventListener("input", function(event){
  // Determine which element triggered the event
  input = event.target;
  
  // Set output to 0 if input is index 1 in the array or
  // 1 if input index is 0 in the array
  output = tempFields.indexOf(input) === 0 ? tempFields[1] : tempFields[0];
  
  // Produce the right output
  if(output.id === "c"){ 
    output.value = (+input.value - 32) * 5/9;
  } else {
    output.value = (+input.value * 9/5) + 32;  
  }
  
});

label { display:inline-block; width:100px; }

<div class="temps">
  <label for="f">Fahrenheit: </label><input id="f"><br>
  <label for="c">Celsius: </label><input id="c"><br>
</div>

我可以输入和输出到同一个文本框是 javascript 吗？

1 个答案: