实现一个高度自适应的输入框

需求背景

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

自适应高度的输入框