input标题字体移动到上方线

让input框里面的标题字体向上边线移动，不遮挡输入的文字，如图示例：

图一 input 框正常显示

图二 input框点击后准备输入字体和输入字体后显示

 

实现图二实例代码如下：

1、html代码显示input框

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<div class="input-group">
    <div class="item-info">用户名/邮箱</div>
    <input type="text" tabindex="1"  name="username" class="input-item">
</div>
</body>
</html>

2、对input框样式进行编辑CSS代码

　　

.input-group {
        position: relative;
        top: 100px;
        left: 30%;

    }

    .item-info {
        background-color: #fff;
        color: #999;
        font-size: 12px;
        left: 12px;
        padding: 0 3px;
        position: relative;
        top: 29px;
        transition: all .2s linear 0s;
        width: 4%;
    }

    .input-item {
        border: 1px solid #dcdcdc;
        border-radius: 5px;
        font-size: 15px;
        transition: border-color .15s ease-in-out 0s;
        width: 280px;
        height: 40px;
        outline: none;
    }

    .item_info_focus {
        color: #2aabd2;
        font-size: 10px;
        top: 8px;
    }

    .input-item-focus {
        border-color: #5bc0de;
        outline: 0 auto;
    }

注：类 .item-info 里面的 width: 4% 和  top: 29px 这两个参数会根据不同情况需要进行调整。width: 4%对input框标题字体横向显示调节，如果字体换行显示后需要调整这个参数。top: 29px对input框中字体上下空白空间是否一样

3、jquery代码利用聚焦和失焦事件实现图二功能

//    这里是聚焦事件添加类:item_info_focus和input-item-focus实现input框标题字体向上移动
    $(function () {
        $('.input-item').focus(function () {
            $(this).addClass('input-item-focus');
            $(this).prev().addClass('item_info_focus');
        });
        


//    这里是失焦事件,判断input框里面是否有内容，进行对类:item_info_focus和input-item-focus添加删除操作
        
        $(".input-item").blur(function () {
            const value = $(this).val();
            if (value === "") {
                $(this).removeClass('input-item-focus');
                $(this).prev().removeClass('item_info_focus');
            }else{
                $(this).addClass('input-item-focus');
                $(this).prev().addClass('item_info_focus');
            }
        })
    })

 

 

 

 

posted @ 2021-12-10 16:41  点点滴滴的努力  阅读(798)  评论(0)    收藏  举报