超简单的问题..动态添加事件
进行动态添加的时候,进循环..获得焦点和失去焦点的方法都能加进去.
但是attachEvent里面function里的nInput总是对应nDiv.getElementsByTagName("input")[5]；
- JScript code
<script type="text/javascript"> var oldv; function test() { var nDiv = document.getElementById("div1"); if (window.attachEvent) { var nInput; for (var i = 0; i < nDiv.getElementsByTagName("input").length; i++) { nInput = nDiv.getElementsByTagName("input")[i]; nInput.attachEvent("onfocus", function () { oldv = nInput.value; nInput.style.color = "Black"; nInput.value = ""; }); nInput.attachEvent("onblur", function () { if (nInput.value == "") { nInput.value = oldv; nInput.style.color = "Gray"; } }); } } else { alert("2"); } } </script>- C# code
<form runat="server" id="form1"> <div id="div1"> <table> <tr> <td align="right">用户名:</td> <td><input id="Text1" type="text" value="USER NAME" style="color:Gray" /></td> </tr> <tr> <td align="right">昵称:</td> <td><input id="Text2" type="text" value="NIC NAME" style="color:Gray" /></td> </tr> <tr> <td align="right">密码:</td> <td><input id="Text3" type="text" value="PASSWORD" style="color:Gray" /></td> </tr> <tr> <td align="right">确认密码:</td> <td><input id="Text4" type="text" value="CONFIRM PASSWORD" style="color:Gray" /></td> </tr> <tr> <td align="right">邮箱:</td> <td><input id="Text5" type="text" value="EMAIL" style="color:Gray" /></td> </tr> <tr> <td align="right">电话:</td> <td><input id="Text6" type="text" value="TELEPHONE" style="color:Gray" /></td> </tr> </table> </div> <table> <tr> <td><input id="Button1" type="button" value="提交" /></td> <td colspan = "30"></td> <td><input id="Button2" type="button" value="返回" /></td> </tr> </table> </form>
[解决办法]
- JScript code
// 通用代码<script type="text/javascript">var oldv = ""; function onfocusHandler(e) { var ev = e || window.event; var elt = ev.target || ev.srcElement; oldv = elt.value; elt.style.color = "Black"; elt.value = "";} function onblurHandler(e) { var ev = e || window.event; var elt = ev.target || ev.srcElement; if (elt.value == "") { elt.value = oldv; elt.style.color = "Gray"; }} function test() { var nDiv = document.getElementById("div1"); var inputs = nDiv.getElementsByTagName("input"); for ( var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.addEventListener) { input.addEventListener("focus", onfocusHandler, false); input.addEventListener("blur", onblurHandler, false); } else if (input.attachEvent) { input.attachEvent("onfocus", onfocusHandler); input.attachEvent("onblur", onblurHandler); } else { alert("error"); } }}</script>
[解决办法]
回答之前，先批下楼主：自己没有解决，怎么能说是超简单的问题？
另：你的代码存在的问题
JS兼容性不好，在某些浏览器下无效。
样式与内容没有分离，最好不要使用行内样式，取而代之的是外部css文件。
我使用jQuery来解决你的问题，在IE和FF下都经过了测试，代码见下面
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>jQuery选择器</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .black{color:black;} .gray{color:gray;} </style> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> (function($){ $(function(){ $("#div1 input.gray").focus(function(){ $(this).attr("defaultvalue",$(this).attr("defaultvalue")?$(this).attr("defaultvalue"):$(this).attr("value")).removeClass("gray").addClass("black"); }); $("#div1 input.gray").blur(function(){ $(this).attr("value",$(this).attr("value")==""?$(this).attr("defaultvalue"):$(this).attr("value")).removeClass("black").addClass("gray"); }); }); })(jQuery); </script> </head> <body> <form runat="server" id="form1"> <div id="div1"> <table> <tr> <td align="right">用户名:</td> <td><input id="Text1" type="text" value="USER NAME" class="gray" /></td> </tr> <tr> <td align="right">昵称:</td> <td><input id="Text2" type="text" value="NIC NAME" class="gray" /></td> </tr> <tr> <td align="right">密码:</td> <td><input id="Text3" type="text" value="PASSWORD" class="gray" /></td> </tr> <tr> <td align="right">确认密码:</td> <td><input id="Text4" type="text" value="CONFIRM PASSWORD" class="gray" /></td> </tr> <tr> <td align="right">邮箱:</td> <td><input id="Text5" type="text" value="EMAIL" class="gray" /></td> </tr> <tr> <td align="right">电话:</td> <td><input id="Text6" type="text" value="TELEPHONE" class="gray" /></td> </tr> </table> </div> <table> <tr> <td><input id="Button1" type="button" value="提交" /></td> <td colspan = "30"></td> <td><input id="Button2" type="button" value="返回" /></td> </tr> </table> </form> </body></html>