html获得焦点和失去焦点

原创已于 2022-05-05 22:02:23 修改 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2022-05-05 21:58:52 首次发布

html 同时被 2 个专栏收录

20 篇文章

订阅专栏

8 篇文章

订阅专栏

此博客详细描述了一个HTML页面中，当用户聚焦和失去输入框焦点时，如何通过JavaScript实现'hello'到'seeyou'的值切换以及颜色变化。它展示了前端开发者如何利用onfocus和onblur事件来控制用户体验。

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

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <input type="text" name="name" value="hello" />
    <script>
        var text = document.querySelector('input');
        text.onfocus = function () {
            console.log('得到了焦点');
            if (this.value == 'hello') {
                this.value = 'see you';
            }
            this.style.color = '#333';
        }
        text.onblur = function () {
            console.log('失去了焦点');
            if (this.value == 'see you') {
                this.value = 'hello';
            }
            this.style.color = '#999';
        }
    </script>
</body>
</html>