实现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/}标签修改一下,改为如下的标签 ...
随机推荐
- java 输入输出 函数对象构造
/*********************输入输出*******************/ //输入字符串 不包括最后的换行符'\n' import java.io.BufferedRe ...
- Unity3D 4.61 实现淡入淡出的场景过渡方法。
还在学习过程中,如果有大大看到请指点. orz原来官方就有了更好的处理方法的教程,具体查看下面视屏. [Unity官方实例教程 秘密行动] Unity官方教程<秘密行动>(五) 屏幕渐变效 ...
- [翻译] CBStoreHouseTransition
CBStoreHouseTransition What is it? A custom transition inspired by Storehouse iOS app, also support ...
- ArcGis学习教程免费版在线观看
ArcGis学习教程免费版在线观看 作者:池建 文章来源:清华大学出版社 点击数:150220 更新时间:2013-8-8 摘要:Arcgis学习视频教程根据书籍章节逐步讲解较为详细 ...
- 【Android 界面效果25】android中include标签的使用
在一个项目中我们可能会需要用到相同的布局设计,如果都写在一个xml文件中,代码显得很冗余,并且可读性也很差,所以我们可以把相同布局的代码单独写成一个模块,然后用到的时候可以通过<include ...
- Android开发——实现固定在ScrollView顶部的View，类似于新浪微博的评论列表的顶部
现在很多App都实现了这个功能,例如新浪微博评论页面的评论.转发.赞的数字可以固定在屏幕上方.我个人很喜欢这种设计,所以利用一点空余时间简单实现了一个类似的功能. 先来看一下上面这张图的效果 这个是新 ...
- hdu-5680 zxa and set(水题)
题目链接: zxa and set Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Other ...
- sgu 185 最短路建网络流
题目:给出一个图,从图中找出两条最短路,使得边不重复. 分析:既然是最短路,那么,两条路径上的所有节点的入边(s,x).出边(x,e)必定是最优的,即 dis[x] = dis[s]+edge_dis ...
- 转：YUV RGB 常见视频格式解析
转: http://www.cnblogs.com/qinjunni/archive/2012/02/23/2364446.html YUV RGB 常见视频格式解析 I420是YUV格式的一种,而Y ...
- 重磅消息：JavaFX官方文档翻译完毕
经过XMan团队业余时间半年的努力,终于将JavaFX官方文档全部翻译完毕,内容已经全部在http://www.javafxchina.net中发表. 中文文档具体目录如下: 第一篇 开始学习Java ...