//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元素上使用伪类来实现样式是不支持的