<!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. Markdown: 编译pdf

    在网上发布博文的时候希望能顺便在本地保存一份记录,这样总结的东西很多的时候就可以写成一本给自己看的小书了.在linux下面有两个选择latex和markdown,虽然latex非常强大,但是很少有博客 ...

  2. 【Android Developers Training】 46. 处理音频外放设备

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  3. iOS多线程开发之离不开的GCD（上篇）

    一.GCD基本概念 GCD 全称Grand Central Dispatch(大中枢队列调度),是一套低层API,提供了⼀种新的方法来进⾏并发程序编写.从基本功能上讲,GCD有点像NSOperatio ...

  4. ng-cordova(插件库)

    ng-cordova 环境配置 1.执行以下命令 bower install ngCordova 2.引用文件(在引用cordova.js之前引用) <script src="lib/ ...

  5. C#调用TSC条码打印机打印二维码

    #region 调用TSC打印机打印 /// <summary> /// 调用TSC打印机打印 /// </summary> /// <param name=" ...

  6. Win10安裝weblogic12C

    一.系统环境 Win10系统 Jdk1.8 64位 二.安装Weblogic      第一步:用系统管理员身份打开CMD命令提示符,用CMD方式进入"fmw_12.1.3.0.0_wls. ...

  7. 第一章：windows下 python 的安装和使用

    1. 主流的python版本和大部分人使用的版本都是 2.7 和3.6 2.安装 python2.7 和 python3.6的步骤 1. 下载 python对应的版本:选择使用的 系统, 64位和32 ...

  8. 网络编程学习笔记（二）基于TCP的Socket编程

    1.Socket:英文意思插座.两个Java应用程序可以通过一个双向的网络通信连接实现数据交换,这个双向链路的一端称为一个Socket. 2.Socket通常用来实现client-server(客户端 ...

  9. usaco training 4.2.4 Cowcycles 题解

    Cowcycles题解 Originally by Don Gillies [International readers should note that some words are puns on ...

  10. Spark Standalone Mode Configuration

    For currently popular distributed framework Spark, here is the intro and step to configure the spark ...