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( ...
随机推荐
- Linux(CentOS6.5)下编译安装MySQL Community Server 5.7.12
组件 官方网站 直接下载地址 备注 mysql http://dev.mysql.com/downloads/mysql/ http://mirrors.sohu.com/mysql/MySQL- ...
- C++中double类型的数字如何保留三位小数点详解
我们知道C语言中,如果要求输出结果保留三位小数,我们可以使用pritf()函数轻松的解决.但是C++的输出运算符<<并没有直接实现这个功能,怎么办呢?之前在找答案的过程中各路大神给出了千姿 ...
- XUL透明异形旋转窗体
200行不到的代码,实现透明异形旋转窗体. 下载(25MB): http://oltag.com:8080/yaolixing/18/11/00/OHUIv52.0.1_3_webTrans20180 ...
- grep命令及基本正则表达式
grep命令是Linux系统中一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来. grep可用于shell脚本,因为grep通过返回一个状态值来说明搜索的状态,如果模板搜索成功 ...
- LeetCode题目总结(一)
我的代码在github上,https://github.com/WINTERFELLS/LeetCode-Answers 这里只提供个人的解题思路,不一定是最好的. Problems1-20 寻找两个 ...
- golang 用tar打包文件或文件夹
打包文件用到了tar包,其中tar包的用法可以参考API golang提供了个函数用来遍历文件夹 filepath.Walk 函数具体描述如下: func Walk(root string, walk ...
- PyCharm/WebStorm遇到Cannot start internal HTTP server
在开始学习html.css的时候,使用PyCharm 的模拟链接到服务器的时候总是遇到 网上也没有遇到合适的解决方案,遂下载了WebStorm,希望能通过安装配置好一些设置,结果依然不行,只有从头分析 ...
- 基于 socket.io 的 AI 服务 杂谈
为什么会想到来聊下这个话题. 前几天在公司的项目中,开发一个基于 socket.io 的直播 IM 功能. 直播分为两部分,一部分是比较昂贵的 视频推流, 另外一部分是 IM 即时聊天服务. 从这里开 ...
- CentOS7下安装Docker-Compose
Docker-Compose是一个部署多个容器的简单但是非常必要的工具. 安装Docker-Compose之前,请先安装 python-pip 安装 python-pip 1.首先检查linux有没有 ...
- VSCode好用的Python插件及配置
MS Python插件. 这是微软官方的Python插件,已经自带很多功能.下面是插件功能描述,其中部分内容我做了翻译. a) Linting (Prospector, Pylint, ...