实现textarea自适应的方法
1、用div来模拟实现textarea自适应
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea高度自适应</title>
<style type="text/css">
#contentedit{
padding: 3px;
font-size: 12px;
min-height: 30px;
width:300px;
max-height: 400px;
border:1px solid blue;
overflow-x:hidden;
overflow-y:auto;
word-wrap:break-word;
}
#contentedit:focus{
border:red;
outline: none;
box-shadow: 2px red, 1px blue;
}
</style>
</head>
<body>
<div id="contentedit" contenteditable="true">
<br>
</div>
</body>
</html>
2、使用js来处理textarea;自己写了插件模拟了下练手
一些参考资料：
自适应textareaAuto
输入操作资料：
http://calefy.org/2012/11/12/javascript-key-events-and-input-control.html
propertychange：
http://msdn.microsoft.com/en-us/library/ie/ms536956(v=vs.85).aspx
兼容处理解决方案：
http://www.cnblogs.com/lhb25/archive/2012/11/30/oninput-and-onpropertychange-event-for-input.html
use strict:
参考网上的代码最终效果：http://sandbox.runjs.cn/show/m63mvund
实现textarea自适应的方法的更多相关文章
- textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标
1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...
- 简单实现一个textarea自适应高度
textarea自适应的实现方法很多,原理其实比较简单:监听textarea的input或者键盘事件,获取元素的scrollHeight,重置textarea元素的高度. 预览地址:textarea ...
- jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...
- textarea 赋值的方法
textarea 赋值的方法 <textarea name="" rows="3" id="note21" ></text ...
- Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法
Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...
- C# winform中 窗体缩放自适应的方法（不同电脑/不同分辨率）
C# winform中 窗体缩放自适应的方法(不同电脑/不同分辨率) 窗体缩放是一个困扰我多时的问题,为了解决这个问题,我从网上找了很多相关的资料,很多人说用Anchor和Dock属性,但是我试了 ...
- viewport原理和使用和设置移动端自适应的方法（移动适应电脑）
viewport原理和使用和设置移动端自适应的方法 HTML中: <meta name="viewport" content="width=device-width ...
- div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
- dedecms织梦手机端文章内容页图片不能自适应解决方法
dedecms织梦手机端文章内容页图片不能自适应解决方法: 方法一修改手机端文章页模板代码: 找到并打开手机端的文章内容页模板,将里面的{dede:field.body/}标签修改一下,改为如下的标签 ...
随机推荐
- hadoop群集安装中碰到的问题
在hadoop群集安装结束后,进行格式测试出现问题如下 格式化 cd /data/hadoop/bin ./hdfs namenode -format 15/01/21 05:21:17 WARN f ...
- ArcGIS Engine断开其他ArcSDE用户连接的解决方案
来自:http://blog.csdn.net/linghe301/article/details/38925481 最近有很多用户咨询在ArcGIS Engine中希望能够实现断开其他客户端连接Ar ...
- VA中修改函数注释
在VA中修改对应的函数和文件注释,可以使用VA自动产生函数和文件头注释 //************************************************************** ...
- 改变WPF ListBoxItem的选中样式
想用ListBox作一个类似IOS 设置的菜单,却发现很难改变ListBoxItem鼠标移过.选中的默认蓝色背景与边框. 尝试使用Style来设置strigger,依然不成功.在百度搜索一些资料,提到 ...
- Oracle数据库作业-5 查询
14.查询所有学生的Sname.Cno和Degree列. select t.sname,c.cno,c.degree from student t inner join score c on t.sn ...
- Linux apache日志分析常用命令汇总
1.查看当天有多少个IP访问: awk '{print $1}' log_file|sort|uniq|wc –l 2.查看某一个页面被访问的次数: grep "/index.php&quo ...
- Javascript计算中英文混输字符串长度V2
同上篇, client端也需要同样规则验证 compact_strlen: function(str) { var strlen = 0; for(var i =0; i<str.length; ...
- Linux常用命令英文全称与中文解释Linux系统
Linux常用命令英文全称与中文解释Linux系统(转) Linux常用命令英文全称与中文解释Linux系统 man: Manual 意思是手册,可以用这个命令查询其他命令的用法. pwd:Pri ...
- R语言快速入门
R语言是针对统计分析和数据科学的功能全面的开源语言,R的官方网址:http://www.r-project.org/ 在Windows环境下安装R是很方便的 R语言的两种运行模式:交互模式和批处理模 ...
- shell中使用echo命令改变输出显示样式
文本终端的颜色可以使用“ANSI非常规字符序列”来生成.举例:echo -e "\033[44;37;5m ME \033[0m COOL" 以上命令设置背景成为蓝色,前景白色,闪 ...