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. swift基础语法之——变量和常量

    swift使用let关键字来定义常量,使用var来定义变量,变量在使用前必须初始化(赋初始值) swift是类型安全语音,即不同类型的变量不能一起运算,必须转成同一类型才可以 变量的类型在声明时不必给 ...

  2. 数据结构31：树(Tree)详解

    复制广义表数据结构中的树 树是数据结构中比较重要也是比较难理解的一类存储结构.本章主要主要围绕二叉树,对树的存储以及遍历做详细的介绍,同时还会涉及到有关树的实际应用,例如构建哈弗曼编码等. 由于树存储 ...

  3. CF708B Recover the String 构造

    For each string s consisting of characters '0' and '1' one can define four integers a00, a01, a10 an ...

  4. SSKeychain的使用 钥匙串

    一.首先要理解keychain与userdefaults的区别: 1.keychain是将数据加密后存储在本地,更安全.路径:Library/Application Support/iPhone Si ...

  5. vue 学习一

    这个是很早之前公司要使用vue.js时候学习记在有道云笔记上的,发觉那个笔记贼多了,没办法,觉得是要换个地方存笔记了, 一vue.js的使用: 可以在页面是直接使用: <!DOCTYPE htm ...

  6. 待修改 URAL 1542

    #include<bits/stdc++.h> using namespace std; const int maxn = 2e5+2e4+11; const int dep = 666; ...

  7. newFixedThreadPool固定线程使用

    1.newFixedThreadPool固定线程池,  使用完毕必须手动关闭线程池, 否则会一直在内存中存在, package ThreadTest; import java.util.concurr ...

  8. Go语言基础环境配置（windows）

    一.基础软件包安装 需要安装go环境包.git.IDE(VScode),安装包见下图: 1.1 安装go windows环境直接双击安装包安装即可,在cmd窗口输入go,结果如下图所示即表示安装成功: ...

  9. JS电话、手机号码验证

    function isTelephone(inpurStr) {            var partten = /^0(([1,2]\d)|([3-9]\d{2}))-\d{7,8}$/;     ...

  10. linux 6 安装 使用 XtraBackup

    帮助文档:https://www.cnblogs.com/imweihao/p/7290026.html ---Yum安装 官网地址:https://www.percona.com/doc/perco ...