初学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>
更多推荐
web网页设计 JavaScript 搜索框代码
发布评论