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. 红帽JBoss企业应用平台

    概观 下载 你好,世界! 文档和API 救命 社区     你好,世界! 1. 设置您的开发环境 10分钟 2. 安装,配置和验证 5分钟 3. 构建您的第一个JBoss EAP应用程序 20分钟 1 ...

  2. csv HTTP简单表服务器

    HTTP Simple Table Server Download Performance testing with JMeter can be done with several JMeter in ...

  3. uva11361 特殊数的数量（数位dp）

    题目传送门 题目大意:给你一个n-m的区间,问你这个闭区间内的特殊数有几个,特殊数的要求是 数的本身 和 各位数字之和  mod k 等于0. 思路:刚接触数位dp,看了网上的题解,说用dp[i][j ...

  4. 修改阿里云ESC Centos 7.4 防火墙开放端口

    例如系统:Centos 7.4操作如下 1,进入 cd /etc/firewalld/zones/ 目录 2,编辑 vim public.xml 3,按i或insert键进入编辑模式 4,在<z ...

  5. BeautifulSoup4模块的使用

    1. 安装 pip3 install beautifulsoup42. 使用 from bs4 import BeautifulSoup obj = BeautifulSoup("HTML内 ...

  6. linux dns高速缓存

    1.安装部署dns yum install bind -y systemctl start  named systemctl  enable  named systemctl  stop  firew ...

  7. LeeCode（No3 - Longest Substring Without Repeating Characters）

    题目: Given a string, find the length of the longest substring without repeating characters. 示例: Given ...

  8. mybatis用法

    转载:https://www.cnblogs.com/xdp-gacl/p/4261895.html 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架 ...

  9. 复制虚拟机出现”适配器 的mac地址在保留地址范围内‘’

    首先我的虚拟机是复制出来的,选择我已经移到,但是结果会出现了以下情况,导致了我无法ping 通,先看下提示: 使用:ipconfig –all 命令查寻,果然再现有打开的虚拟机中,存在两个mac地址相 ...

  10. leetcode 892. 三维形体的表面积

    题目描述: 在 N * N 的网格上,我们放置一些 1 * 1 * 1  的立方体. 每个值 v = grid[i][j] 表示 v 个正方体叠放在单元格 (i, j) 上. 返回最终形体的表面积. ...