//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. 网络传入安全jwts

    使用json web token 发表于Aug 13 2014 由来 做了这么长时间的web开发,从JAVA EE中的jsf,spring,hibernate框架,到spring web MVC,到用 ...

  2. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  3. CCF2014093字符串匹配(C语言版)

    问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你的程序还需支持大小写敏感选项:当选项打开时,表示同一个字母的大写和小写看作不同的字符:当选项关闭时,表示同一个字母的大写和小写 ...

  4. 本地化 NSLocal

    本地化封装了关于语言,文化以及技术约定和规范的信息.用于提供于用户所处地域相关的定制化信息和首选项信息的设置.通过获取用户的本地化信息设置,我们可以为用户提供更加友好人性化的界面设置,包括更改更改应用 ...

  5. 给 Qt 添加模块

    添加 Qt 模块 QtCanvas3D 由于需要使用 Qt Quick 进行 3D 绘图,因此在网上找了一些资料. JS 绘制 3D 的有 ThreeJS 库,应该可以用于 QML.继续搜索,发现Qt ...

  6. Java标准注释配置

    eclipse中java文件头注释格式设置 windows->preferences->java->Code Templates->comments->Type-> ...

  7. bootstrap IE8 兼容性处理

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. 前端开发必备组件库【基于原生js、兼容主流浏览器、B/S必备】

    [持续更新中...跪求点击右上角星星,好人一生平安!] API详见github,链接如下: https://github.com/pomelott/pomelo-plug-in

  9. MCMC(三)MCMC采样和M-H采样

    MCMC(一)蒙特卡罗方法 MCMC(二)马尔科夫链 MCMC(三)MCMC采样和M-H采样 MCMC(四)Gibbs采样(待填坑) 在MCMC(二)马尔科夫链中我们讲到给定一个概率平稳分布$\pi$ ...

  10. juddi学习一

    一.下载juddi 地址:https://mirrors.tuna.tsinghua.edu.cn/apache/juddi/juddi/3.3.4/ 二. 解压下载文件打开目录下的 进入bin目录, ...