需求背景
- 實現一個輸入框，高度可以隨着輸入文字的增加而自動增高，類似於微信輸入
- 有placeholder，輸入為空時，顯示placeholder
- 可設置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的輸入框就大功告成了。