200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > web网页设计 JavaScript 搜索框代码

web网页设计 JavaScript 搜索框代码

时间:2020-06-27 14:47:20

相关推荐

web网页设计 JavaScript 搜索框代码

初学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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。