JavaScript学习-Dom焦点（基础和练习）

最新推荐文章于 2023-07-16 15:31:26 发布

_Kayo_

最新推荐文章于 2023-07-16 15:31:26 发布

阅读量418

点赞数

分类专栏：前端文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/mashirokayo/article/details/126522332

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

焦点，感觉就是目前鼠标聚焦的地方吧，比如点击了某个输入框，输入框就是焦点。

方法（获得焦点，失去焦点)

<script>
    somedom.onfocus()
    somedom.onblur()
</script>

练习（输入框处于焦点状态和失去焦点显示不一样的状态）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="" id="input" value="待输入...">
    <script>
       let input =  document.querySelector("#input");
       input.onfocus = function onf(){
            // console.log("!111");
            input.value = "";
            input.style.color = "#8a2be2";
       } 
       input.onblur = function outf(){
            // console.log("@22");
            input.value = "待输入...";
            input.style.color = "#000000";
       }
    </script>
</body>
</html>