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. jquery冲突

    今天修改一个项目发现,前辈们自己写的一些方法和jquery冲突了,也就是$的冲突,以至于自己用jquery编写的新功能无法正常使用,细究后发现解决办法如下:使用 noConflict() 方法为 jQ ...

  2. windows 7 与linux 双系统 安装

    注意事项: 1.安装Linux的时候,一定要选 “空闲”的硬盘去创建标准分区,否则会格式化C盘或D盘windows的资料.[如 /dev/sda1 为c盘主分区,sda2为扩展分区---下面有D盘,E ...

  3. Quartz 设置一个半小时任务实现

    该文章属于本人原创,转载请注明出处.   spring + Quartz 设置定时任务时要求没一个半小时执行一次   设置两个相同的定时任务   第一个从整点开始每三小时执行一次           ...

  4. Handsontable 学习笔记-Methods

    Handson: 亲自实践 先给出数据源和基本配置: var data =[ ["A1","B1","C1","D1"] ...

  5. 如何使上层的div遮住的链接可以点击

    pointer-events属性 http://www.css88.com/book/css/properties/user-interface/pointer-events.htm 在上层的div中 ...

  6. android studio还不错

    今天体验了哈 Android Studio,还不错同Elipse类似

  7. UICollectionView 简单应用和实际操作

    1.网格视图   UICollectionView      网格布局 UICollectionViewFlowLayout系统图自带网格布局 系统自带的网格布局 UICollectionViewFl ...

  8. OC之Block的用法和实现委托

    Block的基本概念 Block的基本用法 Block实现委托机制 一.Block的基本概念 Block是程序的代码块,这个代码块可以在需要的时候执行.IOS开发中,block到处可见,所以学好很重要 ...

  9. MySQL中/*!40100注释

    MySQL中的注释 MySQL中的注释有三种: # 注释内容 -- 注释内容 /* 注释内容*/ 但是,在导出的SQL文件中,也会看到类似如下内容的注释: CREATE DATABASE `blog` ...

  10. PHP output_buffering 你了解多少

    一.我们要说一下php中的缓存大概有哪些! 在PHP中,我们可以粗略的将缓存分为客户端缓存(Browser缓存),服务器端缓存(Server缓存).由于PHP是基于B/S架构的,所以,我们可以理解为浏 ...