焦点事件 获得与失去 js 230211

时间：2023-02-11 08:57:26

获得焦点事件

标签.onfocus = 函数体


失去焦点事件

标签.onblur = 函数体

演练

文本框获得焦点后，影响某某

文本框失去焦点后，影响某某


示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<input type="text"  value="请输入关键词来搜索">
<div class="box" style="display: none;width: 200px;height: 60px;background-color: gold;">

</div>


<script>
    // 定义变量
    var ipt = document.querySelector("#ipt")
    var box = document.querySelector(".box")
    // 事件绑定
    ipt.onfocus = ipt_focus
    ipt.onblur = ipt_blur

    // 事件详情
    function ipt_focus() {
        // 让盒子显示
        box.style.display = "block"
        ipt.value = ""
    }

    function ipt_blur() {
        // 让盒子消失
        box.style.display = "none"
        ipt.value = "请输入搜索关键词"
    }
</script>


</body>
</html>
标签：

相关文章