Question

我有两个输入字段例如：您键入一种颜色，另一种颜色代码。

像这样：|Green| |#008000|

我不想学习如何找到颜色代码，但是如何将值或变量与另一个匹配。这只是一个例子。

我想知道的是当我填写第二个时，我以最好的方式自动生成其中一个字段。当我在第一个字段中输入“green”时，我希望代码自动出现在第二个字段中，反之亦然。我只想做几种颜色。

<html>
<head>
  <script type="text/javascript">

var inputA = document.getElementById("color");
var inputB = document.getElementById("code");

inputA.onkeyup = function() {
   var v = this.value.toLowerCase();
    if (colormapping.color2code[v]){
       inputB.value = colormapping.color2code[v];
    } else {
        inputB.value = '';
    }
   }
inputB.onkeyup = function() {
   var v = this.value.toUpperCase();
    if (colormapping.code2color[v]){
        inputA.value = colormapping.code2color[v];
    } else {
        inputA.value = '';
    }
}
colormapping = {
    color2code:{
       green : '#008000',
       red   : '#FF0000'
    },
    code2color:{
       '#008000':'green',
       '#FF0000':'red'
    }
}
</script>
</head>

<body>
Name:<br />
<input id="color"><br />
Code:<br />
<input id="code">

</body>
</html>

这是我走了多远。问题可能是我的标签。为什么不起作用？：/

Answer 1

请尝试以下操作： Example

基本上，您需要一个比较对象，您可以查看。

colormapping = {
    color2code:{
       green : '#008000',
       red   : '#FF0000'
    },
    code2color:{
       '#008000':'green',
       '#FF0000':'red'
    }
}

然后是相应的事件听众：

inputA.onkeyup = function() {
   var v = this.value.toLowerCase();
   (colormapping.color2code[v])?
       inputB.value = colormapping.color2code[v]:
       inputB.value = '';
}

，反之亦然inputB：

inputB.onkeyup = function() {
   var v = this.value.toUpperCase();
    if (colormapping.code2color[v]){
        inputA.value = colormapping.code2color[v];
    } else {
        inputA.value = '';
    }   
}

两者都有基本相同的代码 - 第一个使用ternary if operator而不是经典的if。

（非常高级：如果你想让它变得更好，请将它包装在一个匿名函数中，以保护映射免受更改并避免全局命名空间污染。）

Answer 2

不确定这是否有帮助。我能理解的是，当输入A的值发生变化时，您想要更改输入B的值。如果是：

var inputA = document.getElementById("inputA");
var inputB = document.getElementById("inputB");
inputA.onkeyup = function() {
   inputB.value = inputA.value
}

检查jsFiddle如何做到这一点。如果这不是您想要的，请随意投票。

http://jsfiddle.net/9xeXC/

Answer 3

您可以将onchange事件用于javascript。

HTML：

<input type="text" id="input1" onchange="input1_changed">
<input type="text" id="input2" onchange="input2_changed">

在javascript函数中使用switch语句根据更改的输入值更改其他输入

使用Javascript：

function input1_changed() {
  var value = document.getElementById("input1").value;
  switch (value) {
    case "Green":
      document.getElementById("input2").value = "#00FF00";
      break;
    // continue for other colors
  }
}

function input2_changed() {
  var value = document.getElementById("input2").value;
  switch (value) {
    case "#00FF00":
      document.getElementById("input1").value = "Green";
      break;
    // continue for other values
  }
}

在javascript中更改另一个时更改输入

3 个答案: