您的位置：首页 > Web前端 > JavaScript

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

2017-05-06 19:13 435 查看

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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 获得焦点失去焦点获取ID函数

相关文章推荐

新的分享

章节导航