初学JavaScript,略微懂得一点毛皮,得出一点复习经验,在这里分享一下。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>搜索框</title></head><style>#i1{color: grey;}</style><body>搜索<input type="text" value="请输入关键字" id="i1"></body></html><script>var ip = document.getElementById('i1');//添加事件,获得焦点,value不为“请输入关键字”则value变为空,输入文字为黑色字体ip.addEventListener("focus",function(){if (ip.value=="请输入关键字") {ip.value=""ip.style.color="black"}})// 添加事件,失去焦点时,value为空则回到默认状态ip.addEventListener("blur",function(){if (ip.value=="") {ip.style.color="grey"ip.value="请输入关键字"}})// 添加事件,如果value新输入的与默认的value相同。则再次变为默认样式。ip.addEventListener("change",function(){if (ip.value=="请输入关键字") {ip.style.color="grey"}})</script>