<!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. .NET C#转Java没那么难，开发环境篇

    .NET C#转Java没那么难,都是面向对向的语言,而且语法还是相似的,先对比一下开发环境,再到Servlet,再到MVC,都是一样一样的,只是JAVA的配制项比较多而已,只要配好一个,后面都是co ...

  2. sql求和isnull注意事项

    如果不用isnull函数判断则计算出来如果有一列是null 则相加就是null,如 两列:1 null 1+null = nullselect sum(ISNULL(jinE,0)+ISNULL(qi ...

  3. top命令总结

    top命令主要用来观察和收集运行在系统上的进程的一些有用信息.ps只是一个快照,是ps命令执行的那一瞬间的系统中进程的快照.top则可以用于持续观察. 第一步,在命令行键入top,回车进入top管理界 ...

  4. windows环境下，怎么解决无法使用ping命令

    基本都是因为"环境变量"导致的,查看环境变量path在"Path"中追加"C:\Windows\System32"

  5. DataFrame创建

    DataFrame/DataSet 创建 读文件接口 import org.apache.spark.sql.SparkSession val spark = SparkSession .builde ...

  6. java怎么发http请求

    package wzh.Http; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStr ...

  7. Linux系统目录结构介绍

    参考博客: http://www.cnblogs.com/chensiqiqi/p/6243549.html 感谢原博主为我学习Linux指明方向!! linux目录:一切从“根”开始,“/”是所有目 ...

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

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

  9. Vue--props

    组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的 props 选项. 字面量语法 vs 动态语法 初学者常犯 ...

  10. ThinkPhp框架：分页查询和补充框架知识

    上一篇的随笔写的是基本操作,现在可以做一些高级操作,例如有条件的查询数据,有分页的条件查询数据 一.一个条件的查询数据 查询数据自然是先要显示出数据,然后根据条件进行查询数据 (1)显示出表的数据 这 ...