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

Change an input when you change another one in javascript

本文关键字：输入 一个 javascript 另一个      更新时间：2024-05-17

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

像这样：|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>

这就是我所走的路。问题可能是我的标签。为什么不起作用？：/

尝试以下操作：示例

基本上，你需要一个比较对象，你可以对照它进行检查。

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。

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

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

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

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

http://jsfiddle.net/9xeXC/

您可以将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
  }
}
相关文章：