如何保存输入值并将值放在其他输入中?

时间:2011-03-23 16:22:42

标签: javascript

我有2个空输入。我希望用户在输入1中写一些内容,之后文本将显示在输入2中。

4 个答案:

答案 0 :(得分:3)

由于你没有用jQuery标记你的问题,我假设你只想用纯Javascript来做这个。

我建议您在字段上使用ID属性,如下所示:

<input id="input1" value="">
<input id="input2" value="">

然后,使用以下Javascript查找元素,然后将keyup事件绑定到第一个输入,以调用将执行从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();
    });
}

您可以在此处查看此代码:http://jsfiddle.net/8KptW/1/

要详细了解addEventListener,请参阅:https://developer.mozilla.org/en/DOM/element.addEventListener

要详细了解getElementByID,请参阅:https://developer.mozilla.org/en/DOM/document.getElementByID

<强>更新

Ofcourse ...如果你要包含jQuery框架,你可以使用这段代码:

$('#input1').bind('keyup', function () {
    $('#input2').val(this.value);
});

此处的工作示例:http://jsfiddle.net/8KptW/2/

您可以在此处阅读有关jQuery及其事件绑定的更多信息:http://api.jquery.com/bind

答案 1 :(得分:1)

这是我对该目标的实施:

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

请注意,它依赖于DOM 2和一些原型语法

答案 2 :(得分:1)

答案 3 :(得分:0)

这样就可以了。

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