实现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/}标签修改一下,改为如下的标签 ...
随机推荐
- Java 使用 Redis
安装 开始在 Java 中使用 Redis 前, 我们需要确保已经安装了 redis 服务及 Java redis 驱动,且你的机器上能正常使用 Java. Java的安装配置可以参考我们的 Ja ...
- MySQL数据库还原：路径必须用正斜杠？
也是术业不精,其实之前也用命令行还原过几次MySQL数据库,但总记不清语法.这不,今天想把另一台电脑上备份的数据库还原过来,结果不停报错,如下图所示: 后来才发现,因为偷懒直接复制的路径名里,用的全是 ...
- 1.7.3 Relevance-相关性
1. 相关性 相关性是一个查询响应满足用户搜索信息的一个度(程度). 查询响应的相关性主要依赖于上下文的查询.单个搜索应用程序可以通过用户的不同需求和期望被用来在不同的上下文.例如,气候数据的搜索引擎 ...
- [设计模式] .NET设计模式笔记 - 了解设计模式
今天在TerryLee的cnblog(http://terrylee.cnblogs.com)里看到了与设计模式相关的整套文章,初学设计模式看完每篇文章后做些笔记和摘抄. ●什么是设计模式,什么是架构 ...
- Mac 下抓包工具 Charles 修改特定请求
Charles 是 Mac 下常用的抓包工具,它通过将自己设置成系统的代理服务器,从而完成了抓包的工作. 同类的工具还有 fiddler 和 Wireshark,其中 fiddler 是微软公司使用 ...
- php 短信网关短信内容不能有空格
最近在做一个短信通知功能,接口参数都按文档写好了,就是不能发送短信,查了半天,原来是短信内容有空格,之前短信用的英文标点符号,符号后都有一个空格,用了date('Y-m-d H,i,s')函数,后来把 ...
- 自定义基本java类-StdDraw.java
/************************************************************************* * Compilation: javac StdD ...
- js验证连续两位数字递增或递减和连续三位数字相同
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- HTML页面背景音乐控制
//兼容ie,chrome,safari. <object id="AudioID" type="application/x-mplayer2" data ...
- Android之所有API汇总
这里就是所有的Android API,包含所有的API类:http://www.android-doc.com/reference/packages.html