博客

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

  • Post author:
  • Post category:java


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>

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


版权声明：本文为sinat_34647836原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Tags: