<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> input{ height: 40px; } .gg{ color: gray; } .bb{ color: black; } </style> </head> <body> <p>当鼠标进入是，移除内容</p> <p>当输入表退出时，添加内容</p> <input type="text" value="请输入内容" onfocus="Focus(this)" onblur="Blur(this)" /> <script> function Focus(ths){ //查找的第一种方式 //document。。 //第二种方式this //ths //ths.className = 'bb' var current_val = ths.value; if (current_val == "请输入内容"){ ths.value = ""; ths.className = 'bb'; } } function Blur(ths) { var current_val = ths.value; if (current_val == "请输入内容" || current_val.trim().length == 0 ){ ths.value = '请输入内容'; ths.className = 'gg'; } } </script> </body> </html>
案例八：头部菜单