1

2 つの入力フィールドがあります。
例: 1 つは色を入力する場所で、もう 1 つは色のコードを入力する場所です。

このような：|Green| |#008000|

カラーコードを見つける方法を学びたいのではなく、値または変数を別のものと一致させる方法を学びたい. それはほんの一例でした。

私が知りたいのは、2番目のフィールドに入力するときに、フィールドの1つを最適な方法で自動生成する方法です。最初のフィールドに「green」と入力すると、コードが 2 番目のフィールドに自動的に表示され、その逆も同様です。私はちょうどいくつかの色のためにそれをしたい.

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

inputB の場合はその逆です。

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

JavaScript の onchange イベントを使用できます。

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 に答える