textarea内容可从后台读取或手动输入，常规输入后中文和数字会出现换行问题

<style>

#textarea {
display: block;
margin: 0 auto;
overflow: hidden;
width: 250px;
font-size: 14px;
height: 100px;
line-height: 24px;
padding: 2px;
word-break: break-all;
word-wrap: break-word;
}

</style>

<body>

<textarea id="textarea" placeholder="回复内容">参加杨浦区党校的党员培训学习</textarea>

</body>

<script>

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();
};
var text = document.getElementById("textarea");
autoTextarea(text); // 调用

</script>

内容部分转载于    心郎 CSDN

文本框textarea根据输入内容自适应高度 和输入中文和数字换行解决方法的更多相关文章

  1. html5 textarea 文本框根据输入内容自适应高度

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

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

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

  3. jquery文本框textarea自适应高度

    浏览器中默认的文本框是不能根据内容的增多变高,只能固定高度有滚动条,体验不是很好,找了很多方法兼容都不行,总算找到个兼容良好的方法: <body> <textarea id=&quo ...

  4. div模拟文本框textarea

    需求:利用highlight.js对文本框中的内容进行高亮显示 1.highlight.js使用 js中:<script src="js/highlight/highlight.pac ...

  5. 根据窗体自动调整控件及文本框记住上次填写内容Demo

    第一次写文章,组词难免没有不通之处... 最近常用到Winform根据窗体大小自动调整空间大小及字体.文本框记住上次填写内容待下次输入某一段时候自动跳出上次输入内容.于是就随便把两个问题放到同一个de ...

  6. CodeMirror编辑器文本框Textarea代码高亮插件，CodeMirror的简单实用例子

    CodeMirror是一个用于编辑器文本框textarea代码高亮javascript插件,为各种编程语言实现关键字,函数,变量等代码高亮显示,丰富的api和可扩展功能以及多个主题样式,能满足您各种项 ...

  7. 【CSS】隐藏多行文本框Textarea在IE中的垂直滚动栏

    在<[CSS]禁止Google浏览器同意定义调整多行文本框>(点击打开链接)中已经提及过怎样使多行文本框Textarea在一些DOM2的浏览器中固定下来. 这不,多行文本框Textarea ...

  8. 禁止多行文本框textarea拖拽

    禁止多行文本框textarea拖拽: textarea { resize: none; } resize这个是用于元素缩放,它可以取以下几个值: none 默认值 both 允许水平方向及垂直方向缩放 ...

  9. JS控制文本框textarea输入字数限制

    <html> <head> <title>JS限制Textarea文本域字符个数</title> <meta http-equiv="C ...

随机推荐

  1. springboot开发环境搭建

    姓名:陈中娇   班级:软件151 第一步:在Eclipse下面配置Maven环境: 一.使用spring boot新建maven工程不在需要建立maven web工程,只要一般的maven工程就好了 ...

  2. [JavaScript]Prototype继承

    JavaScript相对于其他的编程语言是比较简单的,只要吃透了Prototype和Closure(闭包),基本上就可以说精通JavaScript了. JavaScript里如何实现向Java语言的O ...

  3. html td 限制 高度 和 宽度

    td 要设置成 display : block td 里面的span 自动换行.. <td style="max-width: 150px;overflow-y:scroll;disp ...

  4. svg 日常操作

    创建svg 文件 <svg> </svg> 详解viewBox  SVG Viewport.View Box和preserveAspectRatio 形状  标签内的值可以是百 ...

  5. [USACO19FEB]Moorio Kart(DP)

    Luogu5243 题解 即O(N^2)暴力统计出每个森林的路径,从ctgn个集合中各选出一个数,使得长度>=Y的方案数. 用背包统计.具体实现: \(dp[i+j][0]\leftarrow ...

  6. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_new新建对象

    CLR使用 new 操作符来创建新对象,例如:Employee e=new Employee("Param1");  以下是 new  操作符所做的事情. 它计算类型及其所有基类型 ...

  7. Newtonsoft.Json 自定义序列化格式转化器

    public static class JsonHelper { static JsonHelper() { Newtonsoft.Json.JsonSerializerSettings settin ...

  8. spark 2.X 疑难问题汇总

    当前spark任务都是运行在yarn上,所以不用启动长进程worker,也没有master的HA问题,所以主要的问题在任务执行层面. 作业故障分类故障主要分为版本,内存和权限三方面. - 各种版本不一 ...

  9. php数组·的方法3-数组和变量之间的转换

    /* * 数组和变量之间的转换 * */ //extract() 使用数组定义一组变量 // 键名为变量名 键值为变量值(类似于js的解构赋值) // 返回值是数组的长度 echo '<hr&g ...

  10. win安装wordcloud报错解决方案

    可以知道需要安装的是32位系统上的python 3.6.5版本的 ②登陆 https://www.lfd.uci.edu/~gohlke/pythonlibs/#wordcloud 网址找到相应文件 ...