js input获取焦点和失去焦点的操作

最新推荐文章于 2025-05-25 17:04:35 发布

原创最新推荐文章于 2025-05-25 17:04:35 发布 · 1.2w 阅读

15 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的文本框颜色动态调整方法。当文本框获得焦点时，其背景和文字颜色会发生预设变化；而当文本框失去焦点时，其背景和文字颜色将随机变化。通过简单的代码示例，展示了如何利用onfocus和onblur事件来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

获得焦点时改变文本框的背景和文字颜色，失去焦点时文本框的背景和文字颜色随机改变

onfocus获取焦点
onblur 失去焦点

<input type="text" value="根据焦点操作">

<style>
        input {
            width: 400px;
            height: 40px;
            line-height: 40px;
            border: 1px solid #ddd;
            border-radius: 6px;
            display: block;
            margin: 40px auto;
            padding: 0 10px;
            outline: none
        }
    </style>

window.onload = function () {
            var inputs = document.querySelector("input");
            inputs.onfocus = function () {
                this.style.backgroundColor = "#ccc";
                this.style.color = "#666";
            };
            inputs.onblur = function () {
                //Math.random()生成随机数
                //Math.floor()取整
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);

                var r1 = Math.floor(Math.random() * 256);
                var g1 = Math.floor(Math.random() * 256);
                var b1 = Math.floor(Math.random() * 256);
                this.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
                this.style.color = 'rgb(' + r1 + ',' + g1 + ',' + b1 + ')';
            }
        }