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://www.zhangxinxu.com/wordpress/2010/12/div%E6%A8%A1%E6%8B%9Ftextarea%E6%96%87%E6%9C%AC%E5%9F%9F%E8%BD%BB%E6%9D%BE%E5%AE%9E%E7%8E%B0%E9%AB%98%E5%BA%A6%E8%87%AA%E9%80%82%E5%BA%94/

http://www.dewen.org/q/2921/%E5%A6%82%E4%BD%95%E8%AE%A9textarea+%E9%AB%98%E5%BA%A6%E8%87%AA%E5%8A%A8%E6%8B%89%E4%BC%B8

输入操作资料：

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://zhoujunmiao.com/?p=292

参考网上的代码最终效果：http://sandbox.runjs.cn/show/m63mvund

实现textarea自适应的方法的更多相关文章

  1. textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标

    1.textarea自适应高度,placeholder使用图标 自适应高度,有很多种办法: 1)jq: $("textarea").on("input",fun ...

  2. 简单实现一个textarea自适应高度

    textarea自适应的实现方法很多,原理其实比较简单:监听textarea的input或者键盘事件,获取元素的scrollHeight,重置textarea元素的高度. 预览地址:textarea ...

  3. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  4. textarea 赋值的方法

    textarea 赋值的方法 <textarea name="" rows="3" id="note21" ></text ...

  5. Css中实现一个盒子固定宽度，另一个盒子宽度自适应的方法

    Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...

  6. C# winform中 窗体缩放自适应的方法（不同电脑/不同分辨率）

    C# winform中 窗体缩放自适应的方法(不同电脑/不同分辨率)   窗体缩放是一个困扰我多时的问题,为了解决这个问题,我从网上找了很多相关的资料,很多人说用Anchor和Dock属性,但是我试了 ...

  7. viewport原理和使用和设置移动端自适应的方法（移动适应电脑）

    viewport原理和使用和设置移动端自适应的方法 HTML中: <meta name="viewport" content="width=device-width ...

  8. div模拟textarea自适应高度

    之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...

  9. dedecms织梦手机端文章内容页图片不能自适应解决方法

    dedecms织梦手机端文章内容页图片不能自适应解决方法: 方法一修改手机端文章页模板代码: 找到并打开手机端的文章内容页模板,将里面的{dede:field.body/}标签修改一下,改为如下的标签 ...

随机推荐

  1. js中数组操作

    var selectedCodeArray = []; var num = $.inArray(值, selectedCodeArray)  //值在数组中的位置 selectedCodeArray. ...

  2. python 复杂表达式，以及表单的处理

    d = { 'Adam': 95, 'Lisa': 85, 'Bart': 59 } def generate_tr(name, score): if score < 60: return '& ...

  3. C#基础--属性 字段

    访问修饰符: private: 私有成员,在类的内部才可以访问 protected: 受保护的成员,该类内部和继承类的内部可以访问 public: 公共成员, 完全公开, 没有访问限制 interna ...

  4. iOS中的加密方式 与 文件解压缩

    1.Base64加密方式 Base64是一种加密方法,可逆的加密. Base64中的可打印字符包括字母A-Z.a-z.数字0-9,这样共有62个字符./ + 填充 = echo -n BC|base6 ...

  5. linux 命令行发送邮件及附件

    环境 本机安装sendmail了, 但是没有启动. 其他机器上有mail server, 并且已经把本机加到open relay列表中了, 可以通过该mail server发送邮件.做法如下:1. 安 ...

  6. [转]WPF 获取程序启动路径

    本文转自:http://hi.baidu.com/lilipangtou/item/f1b7488e3c92c4d05e0ec1ab 在Windows Form程序中,获取自身的启动目录是非常容易的, ...

  7. Web前端学习笔记3

    1.meta标签. 1.1 <meta charset="utf-8"> charset:字符集 1.2 <meta name="keywords&qu ...

  8. CSS选择器笔记

    一.元素选择符 序号 选择器 含义 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元 ...

  9. static和public

    static:静态.   可以设置:静态类.静态变量.静态方法.   没有使用static修饰的成员为实例成员. 静态成员的使用:通过类名.   1.不加static修饰的成员是对象成员,归每个对象所 ...

  10. jQuery - 中文輸入法與KeyDown/KeyPress事件

    最近專案中引用了Telerik ASP.NET擴充元件AutoComplete輸入欄位,測試時發現偶爾會不聽始喚,輸入文字時無法觸發資料查詢,在Javascript Source Code裡反覆追蹤測 ...