Input框内的提示文字变化效果

大致效果如下:

点击前,灰色的placeholder的效果(其实不是写在placeholder里的)

点击后效果,变小 上移

 

代码如下:

Html:

(都是重复的这里就贴了其中一行的)

<div>
    <div class="floatText">手机号</div>
    <input id="mobileNum" class="inputBox" type="tel">
</div>

css:

.floatText {
    position: absolute;
    bottom: 9px;
    z-index: 9;
    pointer-events: none;
    font-size: 14px;
}

jQuery:

//输入框提示文字特效===================================
        $(".inputBox").focus(function () {
            var inputitems = $(".inputBox");
            var index = $(".inputBox").index(this);
            var oldBrother = $(inputitems[index]).prev();
            $(oldBrother).animate({
                bottom: '32px',
                fontSize: '12px',
            }, 300);
        });

        $(".inputBox").blur(function () {
            if ($(this).val() == "") {
                var inputitems = $(".inputBox");
                var index = $(".inputBox").index(this);
                var oldBrother = $(inputitems[index]).prev();
                $(oldBrother).animate({
                    bottom: '9px',
                    fontSize: '16px',
                }, 300);
            }
        });

思路很简单: 把div定位在input框里, 禁用它的鼠标事件,这样点击输入时就不会点着它, 然后输入框聚焦时,div内文字变小上移,失焦是恢复正常.