div模拟输入框input/textarea

//html
<!--填写信息-->
    <div class="info-wrap">
        <form class="formToCheck" id="formToCheck" method="get" action="#">
            <div class="info-box">
                <div contenteditable="true" class="link-textarea user-name" data-form-type="name"></div>
            </div>
            <div class="info-box">
                <div contenteditable="true" class="link-textarea user-moblie" data-form-type="mobile"></div>
            </div>
            <div class="adress-box">
                <div contenteditable="true" class="link-textarea" data-form-type="address"></div>
            </div>
            <div class="reason-box">
                <div class="reason-tilte">申请理由</div>
                <div contenteditable="true" class="link-textarea" data-form-type="reason"></div>
            </div>
        </form>
    </div>

//在IOS中<div contenteditable="true"></div>中点击时可以弹出键盘但是无法输入。加一个样式-webkit-user-select:text就可以了。

.link-textarea:focus {
    border: none;
    outline: none;
    -webkit-appearance: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    color: rgba(0, 0, 0, 0);
	background-color: #fff
}
.user-name:empty:after {
    content: '姓名';
    color: #ababab;
    font-size: 15px;
    text-align: left;
}
.user-moblie:empty:after {
    content: '手机号';
    color: #ababab;
    font-size: 15px;
    text-align: left;
}
.info-box,
.adress-box {
    width: 90.625%;
    margin: 0 auto;
    height: auto;
    min-height: 45px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    margin-bottom: 9px;
    box-sizing: border-box;
}
.info-box .link-textarea,
.adress-box .link-textarea {
    margin: 12px 0px 12px 9px;
    font-size: 15px;
    color: #3b3b3b;
    outline: 0;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-user-modify: read-write-plaintext-only;
	-webkit-user-select:text;
}
.adress-box .link-textarea:empty:after {
    content: '详细地址';
    color: #ababab;
    font-size: 15px;
    text-align: left;
}
.reason-box {
    width: 90.625%;
    margin: 0 auto;
    height: auto;
    min-height: 100px;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    box-sizing: border-box;
}
.reason-box .link-textarea {
    margin: 10px 0px 12px 9px;
    font-size: 15px;
    color: #3b3b3b;
    outline: 0;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-user-modify: read-write-plaintext-only;
	-webkit-user-select:text;//兼容ios上点击可弹出键盘无法输入的问题
}
.reason-box .link-textarea:empty:after {
    content: '以申请理由为基本评判，请认真填写。';
    color: #ababab;
    font-size: 11px;
    text-align: left;
}
.reason-tilte {
    line-height: 15px;
    font-size: 15px;
    color: #ababab;
    margin: 12px 0 0 9px;
}

//为什么会用div来模拟输入框input？

因为，input只能一行显示出输入的文字，如果需要是多行显示出输入的文字就可以用这种方法，

//多行显示出输入的文字，那为什么不直接用textarea呢？

textarea和input都不支持伪类（after,empty,focous等），想要在textarea或者input元素上使用伪类来实现样式是不支持的

转载于:https://www.cnblogs.com/xiaosuibu/p/6742461.html