运行环境: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的上下文变量也依然存在。
如果理解的有问题,请留言共同探讨