js onfocus事件、js onblur事件

最新推荐文章于 2023-09-19 10:32:14 发布

斯钦

最新推荐文章于 2023-09-19 10:32:14 发布

阅读量1.1k

点赞数

分类专栏： Web前端文章标签： js html javascript css

本文链接：https://blog.csdn.net/weixin_44884379/article/details/113173194

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

onfocus事件：
html元素获取到焦点所触发的事件，通常用于 <input>输入框标签，<select>下拉列表标签，以及<a>超链接标签，不是所有html元素都支持onfocus事件。

onblur事件:
html元素失去焦点所触发的事件，与onfocus事件相对，通常用于<input>输入框标签，不是所有html元素都支持onblur事件。

代码展示：

<html>

<head>
    <script type="text/javascript">
        function focus_input() {
            document.getElementById("first").style.backgroundColor = "purple";
        }
        function blur_input() {
            document.getElementById("first").style.backgroundColor = "gold";
        }
        function focus_select() {
            document.getElementById("second").style.backgroundColor = "purple";
        }
        function blur_select() {
            document.getElementById("second").style.backgroundColor = "gold";
        }
        function focus_a() {
            document.getElementById("third").style.backgroundColor = "purple";
        }
        function blur_a() {
            document.getElementById("third").style.backgroundColor = "gold";
        }
    </script>
</head>

<body>
    <input id="first" type="text" onfocus="focus_input()" onblur="blur_input()" />
    <select id="second" onfocus="focus_select()" onblur="blur_select()">
        <option value="option_1">option_1</option>
        <option value="option_2">option_2</option>
        <option value="option_3">option_3</option>
    </select>
    <a id="third" href="#" onfocus="focus_a()" onblur="blur_a()">a标签</a>
</body>

</html>

效果展示：
js onfocus事件、js onblur事件

斯钦

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
js onfocus事件、js onblur事件

onfocus事件：html元素获取到焦点所触发的事件，通常用于 <input>输入框标签，<select>下拉列表标签，以及<a>超链接标签，不是所有html元素都支持onfocus事件。onblur事件:html元素失去焦点所触发的事件，与onfocus事件相对，通常用于<input>输入框标签，不是所有html元素都支持onblur事件。代码展示：<html><head> <script type="t
复制链接

扫一扫