Javascript基础(四):获得焦点和失去焦点事件

Javascript基础(四):获得焦点和失去焦点事件1.获取ID的函数在说获取焦点和失去焦点事件之前,先说说封装获取ID的函数。一般在实际操作中,会经常用到提取某个元素的ID,如果每条都列,想必非常麻烦。一般如果有很多ID需要提取的情况基本都用提取ID的函数。获取ID的函数如下:function$(id){//$符号一般用作获取id的函数名,有时候也有人用$id作为函数名。在这里我们只需要获取一个变量。ret

1.获取ID的函数

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

   function $(id) {
//    $符号一般用作获取id的函数名,有时候也有人用$id作为函数名。在这里我们只需要获取一个变量。
        return document.getElementById(id);
    }
只听到从架构师办公室传来架构君的声音:
但怪得、当年梦缘能短。有谁来对上联或下联?

示例:
CSS代码:

此代码由Java架构师必看网-架构君整理
<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.案例:点击表单隐藏文字

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

代码及其分析:

此代码由Java架构师必看网-架构君整理
<!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>

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

本文来源远春Python,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/209235
0

发表评论