让多个输入框中的内容同时变化的js代码_javascript技巧

<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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

定义和用法
onkeyup 事件会在键盘按键被松开时发生。
语法
onkeyup="SomeJavaScriptCode"参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。
支持该事件的 HTML 标签：
, ,

, , , , ,

, ,
, , , , <dd>, <del>, <dfn>, <div>, <dt>, <em>, <br><fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <br><li>, <map>, <object>, <ol>, <p>, </p> <pre class="brush:php;toolbar:false">, &lt;q&gt;, &lt;samp&gt;, &lt;select&gt;, &lt;small&gt;, &lt;br&gt;&lt;span&gt;, &lt;strong&gt;, &lt;sub&gt;, &lt;sup&gt;, &lt;table&gt;, &lt;tbody&gt;, &lt;td&gt;, &lt;textarea&gt;, &lt;tfoot&gt;, &lt;br&gt;&lt;th&gt;, &lt;thead&gt;, &lt;tr&gt;, &lt;tt&gt;, &lt;ul&gt;, &lt;var&gt; &lt;br&gt;支持该事件的 JavaScript 对象： &lt;br&gt;document, image, link, textarea实例 &lt;br&gt;当您在例子中的输入域中键入字符时，字符会被更改为大写（逐一地）： &lt;br&gt;&lt;div class=&quot;htmlarea&quot;&gt; &lt;textarea id=&quot;runcode54152&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt; function upperCase(x) { var y=document.getElementById(x).value document.getElementById(x).value=y.toUpperCase() } &lt;/script&gt; 输入您的姓名： &lt;input type=&quot;text&quot; id=&quot;fname&quot; onkeyup=&quot;upperCase(this.id)&quot;&gt; &lt;/textarea&gt;&lt;br&gt;&lt;input onclick=&quot;runEx('runcode54152')&quot; type=&quot;button&quot; value=&quot;运行代码&quot;&gt; &lt;input onclick=&quot;doCopy('runcode54152')&quot; type=&quot;button&quot; value=&quot;复制代码&quot;&gt; &lt;input onclick=&quot;doSave(runcode54152)&quot; type=&quot;button&quot; value=&quot;保存代码&quot;&gt;[Ctrl+A 全选 注:&lt;a href=&quot;http://www.jb51.net/article/23421.htm&quot; title=&quot;查看具体详情&quot; target=&quot;_blank&quot;&gt;如需引入外部Js需刷新才能执行&lt;/a&gt;]&lt;/div&gt; &lt;/var&gt; &lt;/ul&gt;&lt;/tt&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;/th&gt; &lt;/tfoot&gt;&lt;/textarea&gt; &lt;/td&gt; &lt;/tbody&gt; &lt;/table&gt;&lt;/sup&gt;&lt;/sub&gt;&lt;/strong&gt;&lt;/span&gt;&lt;/small&gt;&lt;/select&gt;&lt;/samp&gt;&lt;/q&gt;</pre> </ol></object></map> </li> </legend></label></kbd></i> </h6> </h1> </form> </fieldset></em> </dt> </div></dfn></del> </dd>