<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml"> <head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>文本框根据输入内容自适应高度</title>

<style type="text/css">

h2 {

text-align: center;

margin: 50px auto;

}

#textarea {

display: block;

margin: 0 auto;

overflow: hidden;

width: 550px;

font-size: 14px;

height: 18px;

line-height: 24px;

padding: 2px;

border-radius: 4px;

min-height: 20px;

max-height: 70px;

}

textarea {

outline: 0 none;

border-color: rgba(82, 168, 236, 0.8);

box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);

}

</style>

<script>

/**          * 文本框根据输入内容自适应高度

* @param                {HTMLElement}        输入框元素

* @param                {Number}                设置光标与输入框保持的距离(默认0)

* @param                {Number}                设置最大高度(可选)

*/

var autoTextarea = function (elem, extra, maxHeight) {

extra = extra || 0;

var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,

isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),

addEvent = function (type, callback) {

elem.addEventListener ?

elem.addEventListener(type, callback, false) :

elem.attachEvent('on' + type, callback);

},

getStyle = elem.currentStyle ? function (name) {

var val = elem.currentStyle[name];

if (name === 'height' && val.search(/px/i) !== 1) {

var rect = elem.getBoundingClientRect();

return rect.bottom - rect.top -

parseFloat(getStyle('paddingTop')) -

parseFloat(getStyle('paddingBottom')) + 'px';

};

return val;

} : function (name) {

return getComputedStyle(elem, null)[name];

},

minHeight = parseFloat(getStyle('height'));

elem.style.resize = 'none';

var change = function () {

var scrollTop, height,

padding = 0,

style = elem.style;

if (elem._length === elem.value.length) return;

elem._length = elem.value.length;

if (!isFirefox && !isOpera) {

padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));

};

scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

elem.style.height = minHeight + 'px';             
                  if (elem.scrollHeight > minHeight) {

if (maxHeight && elem.scrollHeight > maxHeight) {

height = maxHeight - padding;

style.overflowY = 'auto';

} else {

height = elem.scrollHeight - padding;

style.overflowY = 'hidden';

};

style.height = height + extra + 'px';

scrollTop += parseInt(style.height) - elem.currHeight;

document.body.scrollTop = scrollTop;

document.documentElement.scrollTop = scrollTop;

elem.currHeight = parseInt(style.height);

};

};

addEvent('propertychange', change);

addEvent('input', change);

addEvent('focus', change);

change();

};

</script>

</head>

<body>

<h2>文本框根据输入内容自适应高度</h2>

<textarea id="textarea" placeholder="回复内容"></textarea>

<script>

var text = document.getElementById("textarea");

autoTextarea(text);// 调用

</script>

</body>

</html>

html5 textarea 文本框根据输入内容自适应高度的更多相关文章

  1. Jquery实现 TextArea 文本框根据输入内容自动适应高度

    原文 Jquery实现 TextArea 文本框根据输入内容自动适应高度 在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高,这可能 ...

  2. 如何限制textarea文本框的输入字数

    代码实例如下: <!doctype html><html><head><meta charset="UTF-8"><title ...

  3. 文本框textarea根据输入内容自适应高度 和输入中文和数字换行解决方法

    textarea内容可从后台读取或手动输入,常规输入后中文和数字会出现换行问题 <style> #textarea { display: block; margin: 0 auto; ov ...

  4. c#文本框限制输入内容

         //限制输入不能为中文和全角         private void zhbh_KeyPress(object sender, KeyPressEventArgs e)         { ...

  5. Jquery实现textarea根据文本内容自适应高度

    本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们. autoTextare ...

  6. jQuery实现限制input框 textarea文本框输入字符数量的方法

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. JS案例 - 可自动伸缩高度的textarea文本框

    文本框的默认现象: textarea如果设置cols和rows来规定textarea的尺寸,那么textarea的默认宽高是这俩属性设置的值,可以通过鼠标拖拽缩放文本框的尺寸. textarea如果设 ...

  8. JQuery+AJAX实现搜索文本框的输入提示功能

    平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母,下面马上会弹出一个相关信息的内容框可供选择.感觉这个功能有较好的用户体验,所以也想在自己的网站上加上这种输入提示框. 实现的原理其实很简单, ...

  9. js限制文本框只能输入数字方法小结

    有时需要限制文本框输入内容的类型,本节分享下正则表达式限制文本框只能输入数字.小数点.英文字母.汉字等代码. 例如,输入大于0的正整数  代码如下: <input onkeyup="i ...

随机推荐

  1. java wait 和notify

    这几天自己学习了一下线程的知识,wait 方法使当前的线程等待,notify 方法 唤醒当前的线程的方法 th 线程在5的时候进行wait,此时主线程继续执行, 主线程执行到9的时候 唤醒 th 线程 ...

  2. Petya勒索病毒疫苗出现，分分钟让电脑对病毒免疫

    继wannacry之后,Petya勒索软件攻击再次席卷全球,对欧洲.俄罗斯等多国政府.银行.电力系统.通讯系统.企业以及机场造成了不同程度的影响. 研究发现,Petya 会锁定磁盘的 MFT 和 MB ...

  3. Kafka 源代码分析之log框架介绍

    这里主要介绍log管理,读写相关的类的调用关系的介绍. 在围绕log的实际处理上.有很多层的封装和调用.这里主要介绍一下调用结构和顺序. 首先从LogManager开始. 调用关系简单如下:LogMa ...

  4. Generic（泛型）

    什么是泛型:"通过参数化类型来实现在同一份代码上操作多种数据类型.利用"参数化类型"将类型抽象化,从而实现灵活的复用". 简单来说泛型就是为了使一些代码能够重复 ...

  5. Android使用OKHTTP解析JSON数据

    为了代码重用,我们首先封装一个类.这个类是HttpUtil HttpUtil.java package com.example.asus.networktest; import okhttp3.OkH ...

  6. 【操作教程】SequoiaDB分布式存储教程

    1.各模式适用场景介绍 由于SequoiaDB对比其他的NoSQL有更多的方式将数据分布到多台服务器上,所以下面笔者为阅读者一一介绍每种分布式方式适合于哪种场景. 1.1 Hash 方式分布数据 在H ...

  7. 前端如何将H5页面打包成本地app？

    大家都知道H5页面怎么在手机浏览器里测试,但是如何能打包成APP测试呢?因为本人的手机是IOS系统,如果用Xcode打包需要开发证书,貌似99美元一年.意外发现一个叫Hbuild的软件,简单好用,下面 ...

  8. Android远程桌面助手

    很早之前,做过一个<WinCE远程桌面助手>,在没有屏幕或者在调试LCD驱动时,发挥了很大作用,平日开发也是必备.后来还被网友用于处理一些疑难问题,如无法输入开机密码时可通过该工具远程输入 ...

  9. 在当前光标处按指定属性显示字符 - BOIS中断

    在当前光标处按指定属性显示字符 - BOIS中断 最简单的调试方式是打印. 编写MBR时,判断MBR是否加载并运行,最直接的方式就是打印一个字符. INT 0x10 功能描述: 在当前光标处按指定属性 ...

  10. （转载）WebSphere MQ安装过程

    参考文档: http://www.ibm.com/developerworks/cn/linux/linux-speed-start/l-ss-mq/