【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取/设置 HTML 页面背景颜色 )

韩曙亮

发布于 2024-08-09 09:24:13

16100

代码可运行

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

运行总次数：0

代码可运行

一、案例需求

实现如下效果 , 默认状态下 , 表单显示灰色提示字体 , 点击表单输入内容是黑色字体的 ;

二、案例核心要点

1、获取焦点事件 - onfocus 事件

在 JavaScript 中 , 当 DOM 元素获得焦点时 , 该 DOM 元素上绑定的 onfocus 事件被触发 ;

绑定该 onfocus 事件的元素一般都是 input 表单元素 ;
如 : 当用户点击输入框或通过键盘切换到输入框时 , 该事件会被触发 ;

绑定 onfocus 事件的方法 :

设置 onfocus 属性 : 可以通过 DOM 操作 , 给元素添加 onfocus 属性 , 来指定当焦点集中在元素上时要执行的JavaScript代码 ;

// 行内设置 : 使用 onfocus 属性
<input type="text" onfocus="myFunction()">

// JavaScript 脚本中设置
var text = document.querySelector('input');
text.onfocus = function() {}

addEventListener 动态设置 : 使用 addEventListener 方法来动态地为元素添加 focus 事件的处理函数 ;

// 使用 addEventListener
document.getElementById("myInput").addEventListener("focus", function() {
    // 执行相关操作
});

2、失去焦点事件 - onblur 事件

在 JavaScript 中 , 当 DOM 元素失去焦点时 , 该 DOM 元素上绑定的 onblur 事件被触发 ;

如 : 用户从输入框移动到页面的其他部分或按下 Tab 键移动焦点时 , 该事件会被触发 ;

绑定 onblur 事件的方法 :

设置 onblur 属性 : 可以通过 DOM 操作 , 给元素添加 onblur 属性 , 来指定当焦点集中在元素上时要执行的JavaScript代码 ;

// 行内设置 : 使用 onblur 属性
<input type="text" onblur ="myFunction()">

// JavaScript 脚本中设置
var text = document.querySelector('input');
text.onblur = function() {}

addEventListener 动态设置 : 使用 addEventListener 方法来动态地为元素添加 onblur 事件的处理函数 ;

// 使用 addEventListener
document.getElementById("myInput").addEventListener("onblur", function() {
    // 执行相关操作
});

三、完整代码示例

1、代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Operation Example</title>
    <style>
        input {
            color: gray;
        }
    </style>
</head>

<body>
    <input type="text" value="请输入搜索内容">

    <script>
        // 1. 使用 标签选择器 获取元素
        var text = document.querySelector('input');

        // 2. 注册 获得焦点 事件 onfocus 
        text.onfocus = function() {
            // 如果 input 表单获取焦点 , 则显示 " 请输入搜索内容 " 内容
            if (this.value === '请输入搜索内容') {
                this.value = '';
            }
            // 获取焦点后 , 颜色变为黑色
            this.style.color = 'black';
        }

        // 3. 注册 失去焦点事件 onblur
        text.onblur = function() {
            if (this.value === '') {
                this.value = '请输入搜索内容';
            }
            // 失去焦点后 , 颜色变为灰色
            this.style.color = 'gray';
        }
    </script>
</body>

</html>

2、执行效果

默认状态时 , 显示如下样式 , input 表单中显示 " 请输入搜索内容 " 字体是黑色的 ;

鼠标点击表单 , 此时灰色的字体消失 , 表单中显示光标 ;

此时输入内容显示的是黑色字体 ;

完整的执行效果如下 :

四、开关灯案例

1、案例需求

实现如下开关灯效果 :

2、核心要点 - 获取 / 设置 HTML 页面背景颜色

document.body.style.backgroundColor 属性可用于设置或获取 HTML 页面的背景颜色 ;

设置背景颜色示例 :

document.body.style.backgroundColor = "yellow";

获取背景颜色示例 :

var currentColor = document.body.style.backgroundColor;
console.log(currentColor); // 输出当前页面背景颜色

如果没有为 document.body.style.backgroundColor 显式设置值 , 则它将返回空字符串或浏览器默认的背景颜色 ;
通过直接设置 style.backgroundColor , 可以实时更改页面的背景颜色 , 这种方式比修改 CSS 文件更为便捷 , 尤其适用于动态交互或响应用户事件的情况 ;

3、代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Operation Example</title>
    <style>

    </style>
</head>

<body>
    <button id="button">关灯</button>

    <script>
        var button = document.getElementById('button');

        // 当前开灯状态 设置 1 , 背景白色 , 按钮显示 " 关灯 " , 点击按钮 切换到 关灯状态 
        // 当前关灯状态 设置 0 , 背景黑色 , 按钮显示 " 开灯 " , 点击按钮 切换到 开灯状态
        var flag = 0;
        button.onclick = function() {
            if (flag == 0) {
                document.body.style.backgroundColor = 'black';
                button.innerText = '开灯';
                flag = 1;
            } else {
                document.body.style.backgroundColor = 'white';
                button.innerText = '关灯';
                flag = 0;
            }
        }
    </script>
</body>

</html>

执行效果 :