实现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/}标签修改一下,改为如下的标签 ...
随机推荐
- 内存映射mmap
Table of Contents 1. 什么是mmap 2. 使用方法 2.1. mmap构造器的格式 2.2. 例子1 2.3. 例子2 3. 其它 4. 参考资料 什么是mmap 通常在Unix ...
- UIView的生命周期
一. 大体流程: (loadView/nib)文件来加载view到内存-->viewDidLoad函数进一步初始化这些view-->内存不足时, 调用viewDidUnload函数释放vi ...
- Android小项目之十 应用程序更新的签名问题
------- 源自梦想.永远是你IT事业的好友.只是勇敢地说出我学到! ---------- 按惯例,写在前面的:可能在学习Android的过程中,大家会和我一样,学习过大量的基础知识,很多的知识点 ...
- 强大的JQuery（三）--操作html与遍历
前两篇博客讲到了JQuery的基础知识以及其动画效果,本篇将为大家介绍jquery操纵html以及jquery的遍历. 一.jquery操作html 1.获取内容和属性 text() - 设置或返回所 ...
- 放飞App：移动产品经理实战指南
<放飞App:移动产品经理实战指南> 基本信息 原书名:App savvy:rurning ideas into iPhone and iPad Apps customers really ...
- Ubuntu下安装QT
环境 Ubuntu 9.10 qt4.7.3 gcc 4.4 Ubuntu中缺少 make 首先安装 sudo apt-get install make 如果不知道缺少啥,就按下面的装 1.sudo ...
- [转]Android 应用的自动升级、更新模块的实现
本文转自:http://www.oschina.net/question/163910_28462 我们看到很多Android应用都具有自动更新功能,用户一键就可以完成软件的升级更新.得益于Andro ...
- Java中创建操作文件和文件夹的工具类
Java中创建操作文件和文件夹的工具类 FileUtils.java import java.io.BufferedInputStream; import java.io.BufferedOutput ...
- revel + swagger 文档也能互动啦
beego 从 1.3 后开始支持自动化API文档,不过,目测比较复杂,一直期望 revel 能有官方支持. revel 确实已经有了官方支持的计划,有可能将在 0.14 版本支持,现在才 0.11. ...
- [wordpress]根据自定义字段排序并根据自定义字段查询
Wordpress中,根据根据自定义字段排序和查询是通过WP_Query()方法 如根据 一个自定义的sort的数字字段从小到大进行排序 $args = array( 'post_type' => ...