简易焦点事件

最新推荐文章于 2022-06-22 20:12:42 发布

产品迪

最新推荐文章于 2022-06-22 20:12:42 发布

阅读量100

点赞数

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

本文链接：https://blog.csdn.net/weixin_46054543/article/details/109447450

版权

前端专栏收录该内容

68 篇文章 0 订阅

订阅专栏

核心：获取焦点和失去焦点

获取焦点：

ipt.onfocus = function () {

}

失去焦点：

ipt.onblur = function () {

}

CSS样式：

 <style>
        div {
            width: 300px;
            height: 50px;
            margin-left: 200px;
            margin-top: 200px;
            padding-left: 100px;
            padding-top: 50px;
            background-color: #a7cbff;
        }
        input {
            display: inline-block;
            color: gainsboro;
        }
        button {
            display: inline-block;
        }
    </style>

html和js部分：

<body>
    <div>
        <input type="text" value="iPhone">
        <button>搜索</button>
    </div>
    <script>
        var ipt = document.querySelector('input');
        //获取焦点
        ipt.onfocus = function () {
            //鼠标点击输入框时,若有文本就清空
            if (this.value !== '') {
                this.value = '';
            }
            //设置输入字体颜色
            this.style.color = '#333'
        }
        //失去焦点
        ipt.onblur = function () {
            //鼠标点击空白时出现提示文本
            if (ipt.value == '') {
                ipt.value = 'iPhone';
            }
            this.style.color = 'gainsboro';
        }

    </script>
</body>