<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> 模拟京东搜索框之获得失去焦点 </title>
<!-- 获得焦点： onfocus ;
简单来说就是当一个文本框获得光标代表它可以输入了，这种状态就叫获得焦点
失去焦点：onblur ; -->
</head>
<body>
<input type="text" value="一加8" id="txt">
<script>
// 找到文本框
var txt = document.querySelector('#txt');
// 添加获得焦点事件
txt.onfocus = function () {
// 判断输入框的内容,匹配执行下一代码；
if (this.value == "一加8") {
// 改变文本
this.value = "";
}
}
// 添加失去焦点事件
txt.onblur = function () {
// 判断输入框的内容,匹配执行下一代码；
if (this.value == "") {
// 改变文本,将文本恢复成默认；
this.value = "一加8";
}
}
</script>
</body>
</html>
网友评论