實現一個高度自適應的輸入框

Molin發表於2017-05-09
原文網址 : https://juejin.im/post/591132902f301e006c304e8e

需求背景

  1. 實現一個輸入框，高度可以隨著輸入文字的增加而自動增高，類似於微信輸入
  2. 有placeholder，輸入為空時，顯示placeholder
  3. 可設定maxlength

設想1：使用textarea實現

將textarea的高度設定成auto，overflow設定成visible。程式碼如下：

<textarea style="height:auto;overflow-x:visible;overflow-y:visible;width:300px;"></textarea>複製程式碼

但是經過測試，textarea實際上將是預設的高度，隨著輸入的增多會出現滾動條，並沒有達到我們想要的效果。

設想2：contenteditable

我們知道可以將div的contenteditable設定偽true，將其變為可輸入狀態。程式碼如下：

<div contenteditable="true"></div>複製程式碼

這樣就滿足了我們的第一個需求——高度自適應。但是在手機上測試會發現第一個問題，iOS上面無法輸入。經過查詢資料，發現只需要為其新增如下樣式即可:

div{
    user-select:text;
    -webkit-user-select:text;
}複製程式碼

placeholder

通過contenteditable方法實現的輸入框無法新增placeholder。

使用css模擬placeHolder

// html
<div contenteditable="true" data-placeholder="請輸入手機號碼"></div>

// less
div{
    &:empty:before{
        content: attr(data-placeholder);
        color:#bbb;
    }
    &:not(:empty){
        &:focus:before{
            content:none;
        }
    }
}複製程式碼

但是經過測試在不同手機上面變現不一致，所以放棄了這種方案（猜測可能和:not偽類的相容有關，還沒有做驗證）。

使用css+js實現 placeholder

思路：根據輸入通過動態新增class，模擬placeHolder的行為。

// html
<div class="input-item empty" contenteditable="true" data-placeholder="請輸入手機號碼"></div>

// less
.input-item{
    user-select:text;
    -webkit-user-select:text;
    &.empty:before{
        content: attr(data-placeholder);
        color:#bbb;
        position: absolute;
    }

}

// js
$('.input-item').on('keyup',function(){
    $(this).removeClass('empty')
    if($(this).text() == ""){
        $(this).addClass('empty')
    }
})複製程式碼

到此，我們已經實現了第二個需求——可以設定placeholder

maxlength

同樣的，我們也不能通過直接設定maxlength來滿足需求。所以通過箭筒keyup事件來實時計算長度。

$('.input-item').on('keyup',function(event){
    if($(this).text().length >= $(this).attr('data-length')){
        var text = $(this).text().substr(0, $(this).attr('data-length'));
        $(this).text(text);
    }
})複製程式碼

以上程式碼看上去沒有問題，但是會發現游標會跑到最前方，這樣就會造成不好的使用者體驗，甚至出現Bug。所以在擷取了最大長度的使用者輸入後，我們還需要將游標放到最後。完整程式碼如下：

$('.input-item').on('keyup',function(event){
    if($(this).text().length >= $(this).attr('data-length')){
        var text = $(this).text().substr(0, $(this).attr('data-length'));
        $(this).text(text);
        // 擷取後將游標放到最後
        var _this = $(this)[0]
        _this.focus();
        if($.support.msie)
        {
            var range = document.selection.createRange();
            this.last = range;
            range.moveToElementText(_this);
            range.select();
            document.selection.empty(); //取消選中
        }
        else
        {
            var range = document.createRange();
            range.selectNodeContents(_this);
            range.collapse(false);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
})複製程式碼

到此為止，一個可以自動增加高度，並且支援placeholder和maxlength的輸入框就大功告成了。

demo

自適應高度的輸入框

相關文章