javascript 如何保存输入值并将该值放入其他输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5408429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I save input value and put the value in other input?
提问by gal
I have 2 empty inputs. I want the user to write something in input 1 and after that the text will show up in input 2.
我有 2 个空输入。我希望用户在输入 1 中写一些东西，然后文本将显示在输入 2 中。
回答by McHerbie
Since you didn't tag your question with jQuery, I am assuming that you want to do this just with pure Javascript.
由于您没有使用 jQuery 标记您的问题，我假设您只想使用纯 Javascript 来执行此操作。
I would recommend using ID attributes on your fields like so:
我建议在您的字段上使用 ID 属性，如下所示：
<input id="input1" value="">
<input id="input2" value="">
Then, use the following Javascript to find the elements and then bind a keyup event to the first input to call a function that will perform the copying of the value from input1 to input2.
然后，使用以下 Javascript 查找元素，然后将 keyup 事件绑定到第一个 input 以调用将执行值从 input1 复制到 input2 的函数。
var input1 = document.getElementById('input1');
var input2 = document.getElementById('input2');
var updateInputs = function () {
input2.value = input1.value;
}
if (input1.addEventListener) {
input1.addEventListener('keyup', function () {
updateInputs();
});
} else if (input1.attachEvent) { // support IE
input1.attachEvent('onkeyup', function () {
updateInputs();
});
}
You can see this code in action here: http://jsfiddle.net/8KptW/1/
您可以在此处查看此代码的实际运行情况：http: //jsfiddle.net/8KptW/1/
To read more about addEventListenersee: https://developer.mozilla.org/en/DOM/element.addEventListener
要了解更多信息，addEventListener请参阅：https: //developer.mozilla.org/en/DOM/element.addEventListener
To read more about getElementByIDsee: https://developer.mozilla.org/en/DOM/document.getElementByID
要了解更多信息，getElementByID请参阅：https: //developer.mozilla.org/en/DOM/document.getElementByID
UPDATE
更新
Ofcourse... If you are including the jQuery framework, you could use this code:
当然......如果你包括jQuery框架，你可以使用这个代码：
$('#input1').bind('keyup', function () {
$('#input2').val(this.value);
});
Working Example Here: http://jsfiddle.net/8KptW/2/
这里的工作示例：http: //jsfiddle.net/8KptW/2/
You can read more about jQuery and it's event binding here: http://api.jquery.com/bind
您可以在此处阅读有关 jQuery 及其事件绑定的更多信息：http: //api.jquery.com/bind
回答by Shad
This is my implementation of that goal:
这是我对这个目标的实现：
function syncFields(from,to){
if(!$(from) || !$(to) || $(to).value.length>0){return false;}
if($(from).nodeName.toLowerCase()=='input' && $(from).type=='text'){
var etype='keyup';
}else if($(from).nodeName.toLowerCase()=='select'){
var etype='change';
}else{
return false;
}
$(from).addEventListener(etype,sync,false);
$(to).addEventListener(etype,function(){$(from).removeEventListener(etype,sync,false);},false);
function sync(){
if($(to).nodeName.toLowerCase()=='input' && $(to).type=='text'){
$(to).value=$(from).value;
}else if($(to).nodeName.toLowerCase()=='select'){
$(to).selectedIndex=$(from).selectedIndex;
}
return true;
}
}
Note that it relies on DOM 2 and a dash of Prototype Syntax
请注意，它依赖于 DOM 2 和一些原型语法
回答by ?zgür Kaplan
This will do the trick.
这将解决问题。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function f(a, b) {
document.getElementById(a).value = document.getElementById(b).value;
}
</script>
</head>
<body>
<input id="Submit1" onkeyup="f('Submit2','Submit1')" type="text" value="" />
<input id="Submit2" type="text" value="" />
</body>
</html>
