2010一月6
让多个输入框中的内容同时变化
好久没去逛蓝色理想了，传说中现在注册也需要邀请了，做的越来越正规了。
从自己开始工作到现在，遵循“拿来主义”的思想，在上面已经偷过不少代码了，呵呵。对该站一直怀有敬畏的心理，没办法，上面牛人太多啊。刚才上去看了一下，有位仁兄问：怎么样让多个输入框中的内容同时变化？
简单方法一：
<html>
<body>
<input type="text" name="word" id="1" />
<input type="text" name="word" id="2" />
<input type="text" name="word" id="3" />
<input type="text" name="word" id="4" />
<script type='text/javascript'>
var input_arr = document.getElementsByName('word');
var len = input_arr.length;
for(var i=0; i< len; i++){
input_arr[i].onkeyup = function(){
copyToOther(this.value,this);
};
}
function copyToOther(val,obj){
for(var j=0; j< len; j++){
if(input_arr[j] != obj){
input_arr[j].value = val;
}
}
}
</script>
</body>
</html>
<body>
<input type="text" name="word" id="1" />
<input type="text" name="word" id="2" />
<input type="text" name="word" id="3" />
<input type="text" name="word" id="4" />
<script type='text/javascript'>
var input_arr = document.getElementsByName('word');
var len = input_arr.length;
for(var i=0; i< len; i++){
input_arr[i].onkeyup = function(){
copyToOther(this.value,this);
};
}
function copyToOther(val,obj){
for(var j=0; j< len; j++){
if(input_arr[j] != obj){
input_arr[j].value = val;
}
}
}
</script>
</body>
</html>
简单方法二：
<html>
<head>
<title> Js Test </title>
</head>
<body>
<input type="text" name="word" id="1" />
<input type="text" name="word" id="2" />
<input type="text" name="word" id="3" />
<input type="text" name="word" id="4" />
<script type='text/javascript'>
var input_arr = document.getElementsByName('word');
var len = input_arr.length;
for(var i=0; i< len; i++){
input_arr[i].onkeyup = copyToOther(i);
}
function copyToOther(i){
return function(){
for(var j = 0; j < len ; j++){
if(j != i){
input_arr[j].value = input_arr[i].value;
}
}
}
}
</script>
</body>
</html>
<head>
<title> Js Test </title>
</head>
<body>
<input type="text" name="word" id="1" />
<input type="text" name="word" id="2" />
<input type="text" name="word" id="3" />
<input type="text" name="word" id="4" />
<script type='text/javascript'>
var input_arr = document.getElementsByName('word');
var len = input_arr.length;
for(var i=0; i< len; i++){
input_arr[i].onkeyup = copyToOther(i);
}
function copyToOther(i){
return function(){
for(var j = 0; j < len ; j++){
if(j != i){
input_arr[j].value = input_arr[i].value;
}
}
}
}
</script>
</body>
</html>
=====分隔符====
今天学习闭包，就再给出另一种简单方法吧，呵，其实殊途同归：
<html>
<head>
<title> Js Test </title>
</head>
<body>
<input type="text" name="word" id="1" />
<input type="text" name="word" id="2" />
<input type="text" name="word" id="3" />
<input type="text" name="word" id="4" />
<script type='text/javascript'>
var input_arr = document.getElementsByName('word');
var len = input_arr.length;
for(var i=0; i< len; i++){
input_arr[i].onkeyup = function(m){
return function(){
for(var j=0; j< len; j++){
if(j!=m){
input_arr[j].value=input_arr[m].value;
}
}
}
}(i);
}
</script>
</body>
</html>
<head>
<title> Js Test </title>
</head>
<body>
<input type="text" name="word" id="1" />
<input type="text" name="word" id="2" />
<input type="text" name="word" id="3" />
<input type="text" name="word" id="4" />
<script type='text/javascript'>
var input_arr = document.getElementsByName('word');
var len = input_arr.length;
for(var i=0; i< len; i++){
input_arr[i].onkeyup = function(m){
return function(){
for(var j=0; j< len; j++){
if(j!=m){
input_arr[j].value=input_arr[m].value;
}
}
}
}(i);
}
</script>
</body>
</html>
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2010/01/06/1684/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
有段时间没来了，博客变化不小啊，很个性的博客。
[回复]
其实我也是个典型的拿来主义和修改主义者
[回复]
@狐狸
我最近也比较忙，朋友的站都去的少了。
[回复]
@要饭的
呵呵，彼此彼此。。这毛病，其实也不错 :sad:
[回复]
留个脚印，学习了．
[回复]
@diyidu
瞎写的，呵呵。如果用鼠标复制的话我这个就不能实现了。
[回复]
学习了，留着备用~ :smile:
[回复]
好久没来四毛猪这边了，特别是开始工作后，补RSS看到好玩的东西赶紧飞过来学习～
[回复]
@小明猪
我也好久没有走动了。最近忙的不可开交，房子还马上就到期了。愁事一大堆。
[回复]
汗，有一次我在蓝色上装牛b就被牛人们看出来了
[回复]
@bolo
大家都是在“装牛b”的过程中成长起来的。呵呵。
[回复]
最后一个方法强悍了…看得头大
[回复]
@风也飘泊
话说今天才知道你换域名了。明天把你链接加上去。嗯。。
[回复]