运行环境：IE6，不支持placeholder属性的浏览器。
HTML：
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.8.1/jquery.min.js"></script> <body> <form> <label for="name">用户名：</label> <input type="text" placeholder="请输入用户名"/> <input type="password" placeholder="请输入密码"/> </form> </body> </html>
JS代码：
$(document).ready(function(){ //定义判断当前浏览器是否支持placeholder功能 var supportPH=function(){return "placeholder" in document.createElement("input");}; var placeholderFn=function(input){ var text=input.getAttribute("placeholder"); var wqinput=input; var defaultValue=input.value; if(defaultValue==""){ input.value=text; } if(input) { input.onfocus=function(){ if(wqinput.value===text) wqinput.value=""; }; input.onblur=function(){ if(wqinput.value==="") { wqinput.value=text; } } } } var Inputs=document.getElementsByTagName("input"); if (!supportPH()) { for (var i = 0; i < Inputs.length; i++) { var input = Inputs[i]; if(input.getAttribute('type')==="text" || true) placeholderFn(input); } } });
此段代码有玄机，你如果看懂了wqinput变量在失去焦点和获得焦点的事件中，都依然保持着第一次赋值时的各个对象的值，并且一直保持着。应该想到此处有闭包现象，实际上也确实使用了闭包，只是不知不觉而已。原因是。input.onfocus和input.onblur绑定了处理方法后，即使离开了函数placeholderFn，由于input对象存在，所以，focus和blur的上下文变量也依然存在。
如果理解的有问题，请留言共同探讨