JavaScript-焦点事件

最新推荐文章于 2024-09-10 13:24:07 发布

原创最新推荐文章于 2024-09-10 13:24:07 发布 · 563 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了HTML中两种重要的焦点事件——blur和focus的使用方法，并通过示例展示了如何利用这些事件实现文本输入字段的自动转换和样式变化。

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

焦点事件会在页面获得或者失去焦点的时候触发。
blur：在元素失去焦点时触发。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>lose focus event</title>
</head>
<body>
    <script type="text/javascript">
    function upperCase(){
        var x = document.getElementById("fname").value;
        document.getElementById("fname").value = x.toUpperCase();
    }
    </script>
    输入你的姓名：
    <input type="text" id="fname" onblur="upperCase()" />
</body>
</html>

focus:在元素获得焦点时触发。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <title>get focus event</title>
</head>
<body>
    <script type="text/javascript">
        function setStyle(x){
            document.getElementById(x).style.background="yellow";
        }
    </script>
First name:<input type="type" id="fname" onfocus="setStyle('fname')"/>
Last name:<input type="type" id="lname" onfocus="setStyle(this.id)">
</body>
</html>