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

【问题标题】：Can I input from and output to the same textbox is javascript?我可以输入和输出到同一个文本框是javascript吗？
【发布时间】：2021-02-17 13:29:06
【问题描述】：

我一直在为此尝试不同的选择，但作为 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>

是否可以这样做，无论哪个字段正在输入，另一个将显示转换结果的输出？如果不是，那么做我想做的最接近的方法是什么？

【问题讨论】：

当一个输入字段获得焦点时，将 other 的引用存储到一个变量中 - 然后使用该变量将输出值设置到相应的字段中......？
您有几个 HTML 错误：<input> 元素没有结束标记（</input> 不是有效的 HTML 标记）。而且，<label> 元素必须将其for 属性设置为表单字段的id，它是标签“for”，或者该表单字段必须是<label> 元素的子元素，在这种情况下，没有使用for 属性。

标签： javascript input output

【解决方案1】：

参见下面的内联 cmets：

// 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>

【讨论】：