时间戳

首页 > 解决方案 > 我可以输入和输出到同一个文本框是javascript吗？

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

问题描述

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

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

标签： javascriptinputoutput

解决方案

请参阅下面的内联评论：

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

推荐阅读