如何保存输入值并将值存入其他输入？

1

几许使用jQuery： http://fiddle.jshell.net/Shaz/bwKZt/10/

2011-03-23 16:25:43 Shaz

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和原型语法

来源

2011-03-23 16:25:25 Shad

+0

不要忘记，它也依赖于jQuery。 – McHerbie 2011-03-23 16:44:10

+0

@McHerbie不，只是一个Prototype语法的短划线：我通常添加'var $ = function（id）{if（typeof id =='object'&& id.nodeType && id.nodeType == 1）{return id;} return document.getElementById（id）; }'到我的JS的顶端。 – Shad 2011-03-23 17:08:13

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>

来源

2011-03-23 16:35:34

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

UPDATE

的当然......如果你是包括jQuery框架，你可以使用此代码：

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

工作实例这里：http://jsfiddle.net/8KptW/2/

你可以阅读更多关于jQuery和它的活动在这里结合：http://api.jquery.com/bind

来源

2011-03-23 16:36:23 McHerbie

如何保存输入值并将值存入其他输入？

回答

相关问题