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