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. Java最重要的21个技术点和知识点之JAVA多线程、时间处理、数据格式

    (四)Java最重要的21个技术点和知识点之JAVA多线程.时间处理.数据格式  写这篇文章的目的是想总结一下自己这么多年JAVA培训的一些心得体会,主要是和一些java基础知识点相关的,所以也希望能 ...

  2. L - Fabled Rooks（中途相遇法和贪心）

    Problem F: Fabled Rooks We would like to place n rooks, 1 ≤ n ≤ 5000, on a n×n board subject to the ...

  3. jquery相关代码

    1.jquery获取当前选中select的text值 var checkText=$("#slc1").find("option:selected").text ...

  4. IOS UITableView Group&Section

    UItableView 根据数据结构不同 会有不同样式 关键在两个代理 tableviewdelegate&tabledatasourse 下面代码是我实施的Group 在模拟器中 ios6. ...

  5. 【Android 界面效果16】关于android四大组件的总结

    Android四大组件:Activity.Service.Broadcast receiver.Content provider 在Android中,一个应用程序可以使用其它应用程序的组件,这是And ...

  6. 懒人福利:Xcode插件将JSON格式化输出为模型的属性->ESJsonFormat-Xcode

    这是一个直接将json数据转换为模型数据的插件,只需要在控制台输入json数据,就可以在模型文件的.h文件中生成对应的模型数据 对于模型套模型的数据也做了处理,比较方便. 有需要的人可以尝试一下,但不 ...

  7. SQL语言简介

    什么是SQL语言? 是高级非过程化语言(是沟通数据库服务器和客户端的工具) 作用:存取,查询,更新和管理关系数据库系统 SQL语言分类: 1.DDL:数据定义语言 作用:定义和管理数据当中的各种对象 ...

  8. Oracle language types(语言种类) 表的相关操作 DDL数据定义语言

    数据定义语言 Data Definition Language Statements(DDL)数据操纵语言 Data Manipulation Language(DML) Statements事务控制 ...

  9. POJ 1679 The Unique MST (最小生成树)

    The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 22668   Accepted: 8038 D ...

  10. Linux配置防火墙8080端口

    1.查看防火墙状态,哪些端口开放了 /etc/init.d/iptables status 2.配置防火墙 vi /etc/sysconfig/iptables ################### ...