textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标
2018-01-25 17:57
851 查看
[b]1.textarea自适应高度,placeholder使用图标[/b]
自适应高度,有很多种办法:
1)jq:
效果图:
2)使用插件:autosize,flexText等。。。插件肯定比一两句话的jq强大的多,或者是:这篇文章
1.1 textarea的placeholder使用图标:
只要在placeholder加入unicode编码的图标就行了。比如:
我下载了iconfont图标,下载下来之后,引入iconfont.css文件,然后在palceholder里面加入对应的unicode编码:
效果:
[b]2.div模仿textarea可编辑的功能。[/b]
在div,p等标签中加入 contenteditable="true" ,这个属性,不要="true"也可以,就能实现可编辑的功能。
兼容ios的方法:加个 -webkit-user-select:text 属性就可以了
ios中如果光标不移动:加个 -webkit-user-select:auto;
效果:
2.1模仿placeholder的功能
直接在div上加placeholder肯定不行,所以,只能模仿。在div上加一个class,然后设置这个class的after伪元素的content为你想要的palceholder的值就可以了。
比如:
<div class="box place iconfont" contenteditable="true" ></div>
效果:
\e69a 是我下载的iconfont图标的content值。这样就可以使用图标了。。。
那么模仿了placeholder之后怎样实现它的效果呢?
这就很简单了:思路是:及时获取当前div的text值的长度,如果大于0,就removeclass有content的那个class名,如上就是place这个class;否则就addClass。
那么问题又来了,怎样及时获取当前div的text长度呢,我用了这个:
对,就是这个input propertychange。。。。。结果这里也能用,我也是大吃一惊。。。。。。
最后效果:
兼容性没有具体测,但是在火狐和Safari会出现奇怪的现象:
它自己无缘无故就在div加了个<br >
这个bug没想到解决的办法。。。
自适应高度,有很多种办法:
1)jq:
$("textarea").on("input",function(){ $(this).css({ 'height':'auto', 'overflow-y':'hidden' }).height(this.scrollHeight); })
效果图:
2)使用插件:autosize,flexText等。。。插件肯定比一两句话的jq强大的多,或者是:这篇文章
1.1 textarea的placeholder使用图标:
只要在placeholder加入unicode编码的图标就行了。比如:
我下载了iconfont图标,下载下来之后,引入iconfont.css文件,然后在palceholder里面加入对应的unicode编码:
<textarea class="iconfont" name="" placeholder=" 我是palceholder"></textarea>
效果:
[b]2.div模仿textarea可编辑的功能。[/b]
在div,p等标签中加入 contenteditable="true" ,这个属性,不要="true"也可以,就能实现可编辑的功能。
兼容ios的方法:加个 -webkit-user-select:text 属性就可以了
ios中如果光标不移动:加个 -webkit-user-select:auto;
效果:
2.1模仿placeholder的功能
直接在div上加placeholder肯定不行,所以,只能模仿。在div上加一个class,然后设置这个class的after伪元素的content为你想要的palceholder的值就可以了。
比如:
<div class="box place iconfont" contenteditable="true" ></div>
效果:
\e69a 是我下载的iconfont图标的content值。这样就可以使用图标了。。。
那么模仿了placeholder之后怎样实现它的效果呢?
这就很简单了:思路是:及时获取当前div的text值的长度,如果大于0,就removeclass有content的那个class名,如上就是place这个class;否则就addClass。
那么问题又来了,怎样及时获取当前div的text长度呢,我用了这个:
$(".box").on("input propertychange",function(){ var len=$(this).text().length; if(len>0){ $(this).removeClass("place"); }else{ $(this).addClass("place"); } })
对,就是这个input propertychange。。。。。结果这里也能用,我也是大吃一惊。。。。。。
最后效果:
兼容性没有具体测,但是在火狐和Safari会出现奇怪的现象:
它自己无缘无故就在div加了个<br >
这个bug没想到解决的办法。。。
相关文章推荐
- 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)
- div模拟textarea以css控制最大高度和最小高度实现高度自适应实例页面
- 使用div创建textArea无滚动条高度自适应
- div模拟textarea以实现高度自适应实例页面
- 用DIV+CSS模拟textarea,实现文本框高度自适应用户输入的文本
- div实现自适应高度的textarea,实现angular双向绑定
- div模拟textarea以实现高度自适应实例页面
- div实现自适应高度的textarea实现angular双向绑定
- 用div代替textarea,实现在文本框中使用回车<br>和设置字体功能
- div模拟textarea文本域轻松实现高度自适应
- 基于jQuery实现左右div自适应高度完全相同实现代码
- CSS实现已知宽高的div垂直居中;自适应高度两列布局
- css+div+图片实现高度自适应圆角框
- 不使用定时器实现iframe的自适应高度
- textarea如何实现高度自适应?
- (div+css)上下固定中间自适应高度网页布局的实现
- 相邻div实现一个跟着另一个自适应高度示例代码
- jquery实现div自适应浏览器高度(宽度)
- 基于jQuery实现左右div自适应高度完全相同的代码
- 轻松实现两栏布局:左右DIV等高、内容自适应屏幕高度