textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标
1.textarea自适应高度,placeholder使用图标
自适应高度,有很多种办法:
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>
效果:
2.div模仿textarea可编辑的功能。
在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没想到解决的办法。。。
textarea自适应高度,div模仿textarea可编辑实现自适应高度,placeholder使用图标的更多相关文章
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- div模拟textarea以实现高度自适应实例页面
作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...
- div模拟textarea文本域轻松实现高度自适应
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用一个div模拟textarea并实现高度自适应
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- div模拟textarea且高度自适应
需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...
- div模拟textarea实现高度自增长
今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...
- H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
随机推荐
- 根据NPOI 读取一个excel 文件的多个Sheet
大家都知道NPOI组件可以再你本地没有安装office的情况下来 读取,创建excel文件.但是大家一般都是只默认读取一个excel文件的第一个sheet.那么如果要读取一个excel 的所有shee ...
- BCL和CoreFx的区别
bcl是.netframework clr 的基础库corefx是.net core clr的基础库
- ubuntu16.04编译安装php7.2
1,下载解压 tar xf php-7.2.0.tar.gz cd php-7.2.0/ 2,安装必要的库 sudo apt-get install libxml2-devsudo apt-get i ...
- MicroPython可视化编程开发板—TurnipBit自制MP3教程实例
转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 当前我们都生活在一个有声有色的社会当中,欣赏美丽的景色,享受动人的音乐, ...
- php require、require_once和include、include_once的区别
一.引入php文件路径的方法require '文件路径'; require ('文件路径');require_once '文件路径'; require_once ('文件路径');include 同 ...
- Linux(Cent OS7.2)下启动停止memcached方法及ps命令使用讲解
Linux下,以Cent OS7.2为例,安装memcached后的启动方法很简单,这里我们使用yum源安装. 首先查找yum源版本库的memchaced安装包, yum list | grep me ...
- opacity的背景透明&background中rgba的背景色透明
近期使用css实现了一个loading旋转加载的图片效果,类似gif动画 过程中,需要透明背景,但是图片不要透明 只要背景透明!只要背景透明!只要背景透明! 这里对透明模糊了,两种写法,模糊了 A: ...
- asp.net core 2.0 查缺补漏
asp.net core 2.0 一些有用有趣的设置. 面向(targeting)不同的.net版本: 打开asp.net core 2.0的项目文件: xxx.csproj, 这部分: <Pr ...
- 掌握一门语言Go
摘要:Go语言的优势不必多说,通过本篇文章,让我们花时间来掌握一门外语,Let's Go! 关键字:Go语言,闭包,基本语法,函数与方法,指针,slice,defer,channel,goroutin ...
- Twisted使用和scrapy源码剖析
1.Twisted是用Python实现的基于事件驱动的网络引擎框架. 事件驱动编程是一种编程范式,这里程序的执行流由外部事件来决定.它的特点是包含一个事件循环,当外部事件发生时使用回调机制来触发相应的 ...