当鼠标在文本框内部时,显示手机二字,当离开时,不显示内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
height: 40px;
width: 300px;
margin: 0 auto;
border: 1px solid skyblue
}
input {
height: 40px;
width: 210px;
padding: 0 0;
float: left;
border: none;
caret-color: black;
}
.search {
background-color: skyblue;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
color: white
}
</style>
</head>
<body>
<div class="box">
<input type="text" value="内容">
<div class="search">搜索</div>
</div>
<script>
var input = document.querySelector('input')
input.onfocus = function() {
input.value = ''
}
input.onblur = function() {
input.value = '内容'
}
</script>
</body>
</html>
分析:
1、首先表单需要两个新事件,获得焦点onfocus;失去焦点onblur
2、如果获得焦点,判断表单里面的内容是否为默认文字,如果是默认文字,就清空表单内容。
因此原来基础上缺少一个判断:
修改部分:
<script>
var input = document.querySelector('input')
input.onfocus = function() {
if (input.value == '内容') {
input.value = ''
}
//获得焦点需要把文本框里面的文字颜色变黑
input.style.color = 'red'
}
input.onblur = function() {
if (input.value == '') {
input.value = '内容'
}
//失去焦点,颜色变浅
input.style.color = 'grey'
}
</script>
input.style.color = 'red'
驼峰命名法,c不用大写