大致效果如下:

點選前,黑色的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內文字變小上移,失焦是恢復正常.