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. SecureCRT 滚动条设置

    不久前在Debian下使用kermit时发现kermit有一些优点,比如当串口上不断有信息打印时,仍然可以通过拖动滚动条来查看以前打印的信息,并且滚动条不会滚动到最下面.当按下回车键时,滚动条会自动滚 ...

  2. C++实现日期转换类DateTime

    概述 工作中我们在网络传输时使用time_t来传输时间,在显示时使用字符串来显示,下面是一个日期转换类的实现,方便以后使用: // DateTime.hpp #ifndef _DATETIME_H # ...

  3. 在使用ICSharpCode.SharpZipLib进行目录压缩后，再解压缩是提示这个错误Size mismatch: 4294967295;126976 70202;126976

    在压缩代码中加入entry.CompressionMethod = CompressionMethod.Stored

  4. (转)乐观的并发策略——基于CAS的自旋

    悲观者与乐观者的做事方式完全不一样,悲观者的人生观是一件事情我必须要百分之百完全控制才会去做,否则就认为这件事情一定会出问题:而乐观者的人生观则相反,凡事不管最终结果如何,他都会先尝试去做,大不了最后 ...

  5. GCD三种队列

    :dispatch_get_global_queue 后台执行队列 :dispatch_get_main_queue 主队列 :dispatch_queue_create("test&quo ...

  6. leetcode 题解: Length of Last Word

    leetcode: Given a string s consists of upper/lower-case alphabets and empty space characters ' ', re ...

  7. 【Python Lib】解析HTML利器 BeautifulSoup

    - - 官方API文档,中文版 http://www.crummy.com/software/BeautifulSoup/bs4/doc/index.zh.html - 以后会把常用的摘录出来

  8. (转)MySql开启远程连接权限

    命令行登陆: mysql -u root -p 不行的话可以从MySql.exe进入,找到Mysql根目录中路径类似:"MySQL\bin\mysql.exe",这样: D:\We ...

  9. 1. RAID在数据库存储上的应用

    随着单块磁盘在数据安全.性能.容量上呈现出的局限,磁盘阵列(Redundant Arrays of Inexpensive/Independent Disks,RAID)出现了,RAID把多块独立的磁 ...

  10. Oracle基础 (系统工具(export,import)) exp/imp和 （数据泵 (data pump)）expdp/impdp的区别：

    一.exp/imp和expdp/impdp在功能上的区别: 1.把用户usera的对象导入到userb emp/imp用法: formuser=usera touser=userb; empdp/im ...