小控件——搜索框失去与获得焦点事件

html:search模块套两个盒子，一个是input搜索框，一个是span字体图标

css:span字体图标适合用定位的方式

input搜索框获得焦点宽度变换，用c3动画来做

           <!-- 右侧搜索栏 -->
            <div class="search-right">
                <div class="search">
                    <input type="search" value="王陆">
                    <span class='iconfont icon-sousuo'></span>
                </div>
            </div>

/* search-right模块 */
.nav .search-right {
    position: relative;
    float: left;
    width: 40%;
    height: 100%;
    line-height:36px ;
    background-color: pink;
}
.search-right input {
    /* overflow: hidden; */
    margin: 5px 0 0 32px;
    width: 250px;
    height: 25px;
    border-radius: 12px;
    padding-left: 5px;
    color: #ccc;
    font-size: 10px;
}

/* 操纵字体图标 */
span {
    /* 用定位的方式较好，如果转化为行内块元素，不能完全定位到input里面，还有父盒子塌陷问题*/
    /* 定位：1.一些小的物件 2.两个或几个物品层叠 */
    position: absolute;
    top:5px;
    left: 233px;;
    height: 25px;
    width: 50px;
    line-height: 25px;
    text-align: center;
    border-radius: 0 12px 12px 0;
    color:green;
    background-color: #ccc;
}

/* 配合js的搜索框动画效果 */
@keyframes moveToLeft {
    0% {
        transform: translateX(0);
    }
    100%{
        transform: translateX(-32px);
    }
    /* 100% {
        transform: translateX(0);
    } */
}

js:

    // 2.2 获得焦点与失去焦点事件
    var input = document.querySelector('.search').children[0]
    var span = document.querySelector('.search').children[1]
    // 获得焦点，改变字体颜色与内容
    input.addEventListener('focus', function () {
        if (this.value == '王陆') {
            // 给输入框添加动画效果
            input.style.animation = 'moveToLeft 0.5s forwards'
            input.style.boxShadow = '3px 3px 5px #666'
            this.style.color = '#666'
            this.value = ''
        }
    })
    // 失去焦点，改变字体颜色与内容
    input.addEventListener('blur', function () {
        if (this.value == '') {
            // 恢复原始样式 输入框复位
            input.style.animation = ''
            input.style.boxShadow = ''
            this.value = '王陆'
            this.style.color = '#999'
        }
    })