1

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

像这样：|Green| |#008000|

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

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

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

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

4

3 回答 3

3

请尝试以下操作：示例

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

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 = '';
}

对于输入B，反之亦然：

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

两者具有基本相同的代码 - 第一个使用三元 if 运算符而不是经典的 if。

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

于 2012-07-31T13:12:13.907 回答
0

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

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

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

http://jsfiddle.net/9xeXC/

于 2012-07-31T12:58:19.607 回答
-1

您可以将 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
  }
}
于 2012-07-31T13:24:40.000 回答