This is a small input box exercise (also the first time to write this stuff)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">
<input class="key" type="text" onfocus="func1()" onblur="func2()" value="请输入内容">
</div>
<script>
function func1() {
var divs=document.getElementsByClassName("div1")[0];
var ini=divs.getElementsByClassName("key")[0];
if (ini.value=="请输入内容"){
ini.value="";
}
}
function func2() {
var divs=document.getElementsByClassName("div1")[0];
var ini=divs.getElementsByClassName("key")[0];
if (ini.value.trim().length==0){
ini.value="请输入内容";
}
}
</script>
</body>
</html>