实现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/}标签修改一下,改为如下的标签 ...
随机推荐
- git fetch和git pull之间的区别--转载
原文地址:http://blog.csdn.net/a19881029/article/details/42245955 git fetch和git pull都可以用来更新本地库,它们之间有什么区别呢 ...
- WinServer 之 访问同网段服务器 或 同一服务器多虚拟机间的访问
今天在发布网站时遇到不能访问同网段数据库服务器.具体情况为:web服务端部署在192.168.10.1下,而数据库服务端部署在192.168.10.2下,数据库连接直接配置为192.168.10.2会 ...
- postgres数据库中的数据转换
postgres8.3以后,字段数据之间的默认转换取消了.如果需要进行数据变换的话,在postgres数据库中,我们可以用"::"来进行字段数据的类型转换.实际上"::& ...
- socket通信简介
转:http://blog.csdn.net/xiaoweige207/article/details/6211577 “一切皆Socket!” 话虽些许夸张,但是事实也是,现在的网络编程几乎都是用的 ...
- mybaits 学习
mybaits 学习(一) 注意:如果建的是web项目,run as java application 参考http://www.cnblogs.com/xdp-gacl/p/4261895.htm ...
- 1.6.9 UIMA Integration
1. UIMA 集成 你可以使用solr集成Apache的非结构化信息管理架构(UIMA).UIMA可以让你定义自己的分析引擎通道,逐步添加元数据到文档的标注. 关于Solr UIMA的更多信息,参考 ...
- uiview 的setAnimationTransition : forView 方法实现翻页效果
[UIView beginAnimations:nil context:nil]; [UIView setAnimationTransition:UIViewAnimationTransitionCu ...
- 【阿里云产品公测】ACE安装Discuz超详细图文教程
作者:阿里云用户51干警网 hello.今天我们来在阿里云ACE上安装discuz. 因为本人不喜欢X3.2的版本,这次我使用的是DZX2.5. 首先的是准备工作: 一.申请阿里云ACE内测 http ...
- Session共享的简单总结
1.同服务器.同一域名.不同应用(端口.虚拟目录等) 这种很简单,把sessionState保存到SQLServer,aspnet_regsql之后,修改存储过程TempGetAppID,把 SET ...
- hdu-5587 Array(回溯)
题目链接: Array Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) P ...