gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 18:22:26 25 4
gpt4 key购买 nike

我有两个输入框。
例如:一个输入颜色,另一个输入颜色代码。

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

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

最佳答案

尝试以下操作: 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 = '';
}

对于输入B,反之亦然:

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

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

(非常高级:如果你想让它好看,将它包装在一个匿名函数中以保护映射不被更改并避免全局命名空间污染。)

关于javascript - 在 javascript 中更改另一个输入时更改输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11740487/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com