当前位置：首页 > article >正文

Javascript基础（四）:获得焦点和失去焦点事件

article 2025/6/29 7:05:12

##1.获取ID的函数
在说获取焦点和失去焦点事件之前，先说说封装获取ID的函数。一般在实际操作中，会经常用到提取某个元素的ID，如果每条都列，想必非常麻烦。一般如果有很多ID需要提取的情况基本都用提取ID的函数。
获取ID的函数如下：

   function $(id) {
//    $符号一般用作获取id的函数名，有时候也有人用$id作为函数名。在这里我们只需要获取一个变量。return document.getElementById(id);}

示例：
CSS代码：

<style>div{float: left;width: 110px;height: 110px;background-color: pink;margin: 20px;}
</style>

HTML和JS代码：

<!--实战中，可能遇到需要获取超级多id的案例，如果都是一个一个来获取会影响效率，所以我们可以封装一个函数，专门用来获取id-->
<div id="demo"></div>
<div id="test"></div>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="fore"></div>
<div id="five"></div>
<div id="six"></div>
<script>function $(id) {return document.getElementById(id);}$("demo").style.backgroundColor = "green";//调用方法$("test").style.backgroundColor = "blue";$("one").style.backgroundColor = "orange";$("two").style.backgroundColor = "red";$("three").style.backgroundColor = "purple";$("fore").style.backgroundColor = "#f6e71f";$("five").style.backgroundColor = "#5153ff";$("six").style.backgroundColor = "#ff1496";
// 调用函数，并直接修改盒子的背景颜色
</script>

效果：

这里写图片描述

##2.获取焦点和失去焦点事件
###1.基本语法
这里写图片描述
###2.案例：点击表单隐藏文字

鼠标没点击之前：
这里写图片描述
鼠标点击之后文字消失：

代码及其分析：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>点击隐藏文字</title><style>input{width: 150px;height: 16px;color: #ccc;font-size: 12px;}</style><script>
//  首先分析事件逻辑：
//  1.点击表单,默认字消失,并有光标显示；
//  2.输入要搜索的字，字体变深；
//  3.当清空输入的字，光标消失，默认字再次出现。window.onload = function () {function $(id) {return document.getElementById(id)}//获取ID函数$("bdan").onfocus = function fn() {
//          获取焦点用onfocus事件。下面，用if语句判断条件是否成立。
//          当用户没有在表单输入的时候，也就是表单里面是默认字的时候，
//          清空value值，然后改变字体颜色。if($("bdan").value == "请输入..."){
//                    注意用“==”号，表示等于，单等号意思是赋值。$("bdan").value = "";
//                    清空表单默认字$("bdan").style.color = "#333";
//                    改变字体颜色}}$("bdan").onblur = function fn() {
//                失去焦点用“onblur”事件if($("bdan").value == ""){$("bdan").value = "请输入...";
//                    恢复默认字$("bdan").style.color = "#ccc";
//                    恢复字体颜色}}}</script>
</head>
<body>
<input type="text" value="请输入..."id="bdan"/><button id="btn">查找</button>
</body>
</html>

做这些功能，最重要的是理顺业务逻辑，化整为零。获得焦点和失去焦点事件会在有搜索功能的网站上经常用到，所以要重点理解。谢谢大家！

查看全文

http://www.lryc.cn/news/2420605.html