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

div模拟输入框input/textarea的更多相关文章

  1. div模拟文本框textarea

    需求:利用highlight.js对文本框中的内容进行高亮显示 1.highlight.js使用 js中:<script src="js/highlight/highlight.pac ...

  2. 使输入框(input  & textarea)变为只可读状态readonly="readonly",禁用输入框disabled="disabled"

    使输入框变为只可读状态 readonly="readonly" <input class="select-city" placeholder=" ...

  3. 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)

    一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...

  4. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

  5. div模拟textarea

    有些Weber可能没有用过contenteditable这个属性,如果想编辑一个DIV里面的内容,这个属性是一个非常不错的选择   <div contenteditable="true ...

  6. div模拟textarea文本域轻松实现高度自适应——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...

  7. div模拟textarea在ios下不兼容的问题解决

    今天发现一个好东西,赶紧记下来,我在用textarea的时候,想要自适应高度,这样就不会出现滚动条.网上找了很多,都是用div模拟的,但是好扯淡,div模拟的在ios下不能聚焦并且不能输入.真坑... ...

  8. Bootstrap 表单控件一(单行输入框input,下拉选择框select ,文本域textarea)

    单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...

  9. div模拟textarea实现高度自增长

    今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...

随机推荐

  1. Servlet+Tomcat日志输出

    刚接触Servlet的时候,为了学习方便总是想验证自己的想法,那么输出日志是最常见的手法了,就自己亲身经历总结了如下几种方法,我用的是Web容器是Tomcat. 使用Log4J 在<Servle ...

  2. div模拟table

    <!DOCTYPE html><html><head><meta charset="UTF-8"><title>div模 ...

  3. [HDU 2102] A计划(搜索题,典型dfs or bfs)

    A计划 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  4. struts2(一) struts2入门

    首先推荐一本书,虽然我还没看过,但是我以后肯定会看的,<Struts+技术内幕>提取密码:kg6w .现在只是停留在会使用struts2的层次,自己也想继续深入研究,但是感觉自己的知识面还 ...

  5. 2431: [HAOI2009]逆序对数列

    2431: [HAOI2009]逆序对数列 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 954  Solved: 548[Submit][Status ...

  6. jenkins-Couldn't find any revision to build. Verify the repository and branch configuration for this job

    参考解决方法: https://issues.jenkins-ci.org/browse/JENKINS-20502 原因分析:jenkins无法准确识别revision 操作方法: 在 branch ...

  7. 关于html中利用jQuery选择子节点方法总结——待续

    好几次碰到类似的要求,每次用的都不一样,在之前的面试的时候就被问到,突然觉得虽然自己做过但是说不出头绪,只能回答什么parent(),next()等等.所以想整理一下. 1.需求一:同页面有两个表格, ...

  8. JavaScript的基本规范

    1.不要在同一行声明多个变量: 2.请使用===/!==来比较true/false或者数值: 3.使用对象字面量替代new Array这种形式: 4.Switch语句必须带有default分支: 5. ...

  9. 菜鸟聊JavaScript中this

    菜鸟聊this this在JavaScript中是一个比较头疼的问题,我现在以一枚菜鸟的观点结合代码简单的谈下JavaScript中的this指向问题. 1.例子1 function a() { va ...

  10. 修改Delphi 10.1.2 edit控件在android的复制、剪切和粘贴样式

    Delphi 10.1.2 edit控件在android默认的复制.剪切和粘贴样式太丑,经悟能-DelphiTeacher的提示,用最简单的代码修改后稍有改观. 默认的样式: 修改后的样式: 修改FM ...