移动端的三种输入方式

移动端的三种输入方式：我们知道的有input和textarea

input

input有很多形式的输入，输入的字段可以是文本字段、复选框、掩码后的文本控件、单选按钮等，但是只能输入一行。
例如：

<input type="text" palceholder="请输入您的姓名" / >

textarea

textarea是文本域标签，定义多行文本，但是必须要固定高度，无法实现随着文本内容自动增加高度。
那么，我们如何实现多行文本随着内容的增加而自动增加高度呢?

<textarea id="textarea">
    上海市浦东新区华夏东路孙环路德高一村24栋22号332
</textarea>

<script>
(function($){
    $.fn.autoTextarea = function(options) {
        var defaults={
            maxHeight:null,
            minHeight:$(this).height()
        };
        var opts = $.extend({},defaults,options);
        return $(this).each(function() {
            $(this).bind("paste cut keydown keyup focus blur",function(){
                var height,style=this.style;
                this.style.height = opts.minHeight + 'px';
                if (this.scrollHeight > opts.minHeight) {
                    if (opts.maxHeight && this.scrollHeight > opts.maxHeight) {
                        height = opts.maxHeight;
                        style.overflowY = 'scroll';
                    } else {
                        height = this.scrollHeight;
                        style.overflowY = 'hidden';
                    }
                    style.height = height + 'px';
                }
            });
        });
    };
})(jQuery);

$("#textarea").autoTextarea({
  maxHeight:440,
  minHeight:44
});
</script>

那么除了这样，有没有更简单的方式来实现呢？
答案是有的，html5新增属性contenteditable来解决我们的问题。

contenteditable

contenteditable 属性规定是否可编辑元素的内容。
下面我们来设置div可编辑

<div class="edit-text" contenteditable="true" data-placeholder="请输入您的证件地址"></div>

.edit-text{
    min-height: 0.45rem;
    font-size: 0.16rem;
    color: #2e2e2e;
    line-height: 0.25rem;
    outline: none;
    -webkit-user-select: text;
    padding: 0.1rem 0.15rem 0.1rem 0.2rem;
}

必须要设置-webkit-user-select: text;，否则ios上会有问题
另外下面实现placeholder

.edit-text:empty:before{
    content: attr(data-placeholder);
    color: #cccccc;
}
.edit-text:focus:before{
    content: none;
}