html textarea文本域高度自适应

怼烎@ 2022-03-17 13:10 327阅读 0赞

1、可直接在 [菜鸟教程网站测试页面中测试][Link 1]

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    	<title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    	<textarea style="width: 200px;padding:0px;"
    		  id="symptomTxt"
    		  oninput="autoTextAreaHeight(this)"
             >
    	</textarea>
    </body>
    <script type="text/javascript">	
    	//文本域自适应
     	function autoTextAreaHeight(o) {
    	    o.style.height = o.scrollTop + o.scrollHeight + "px";
    	} 
    	$(function () {
    	    var ele = document.getElementById("symptomTxt");
    	    autoTextAreaHeight(ele);
    	}) 
    </script>
    </html>

2、其实这个段代码有些小瑕疵，输入的时候，高度自适应，但是足字删除输入的内容时，高度就不自适应了

**本人改进办法，由于时间仓促，可能不是很好，如果你有好的方式，可以告诉我，在这里谢谢了。**

解决：因为文本域宽度200px，测试了下，每行能输入15个汉字，length长度为30。所以我监听输入的长度，当大于30时就追加文本域高度。

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    	<title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    	<textarea style="width: 200px;padding:0px;"
    		  id="symptomTxt"
    		  oninput="autoTextAreaHeight(this)"
             >
    	</textarea>
    </body>
    <script type="text/javascript">	
    	//获取文本长度，一个汉字长度为2
    	var strLength = {};
    	strLength.GetLength = function(str) {
    	  return str.replace(/[\u0391-\uFFE5]/g,"aa").length;  //先把中文替换成两个字节的英文，在计算长度
    	};
    	//文本域自适应
     	function autoTextAreaHeight(o) {
    		var element = $(o).val();
    		var len = strLength.GetLength(element);
    		var rows = Math.ceil(len/30); 
    		o.style.height = o.scrollTop + 30 + (rows>0?rows-1:rows)*10 + "px";
    	    //o.style.height = o.scrollTop + o.scrollHeight + "px";
    	} 
    	$(function () {
    	    var ele = document.getElementById("symptomTxt");
    	    autoTextAreaHeight(ele);
    	}) 
    </script>
    </html>

[Link 1]: http://www.runoob.com/try/try.php?filename=tryhtml_headers

发表评论取消回复

表情：

评论列表（有 0 条评论，327人围观）

还没有评论，来说两句吧...

相关阅读

相关 div 模拟textarea文本域实现可编辑且高度自适应

看到标题很多人想用只能用js来实现吧！今天介绍一个标签属性可以让一个block块元素实现可编辑，且高度随内容自适应。 contenteditable ="true/fals

川长思鸟来/ 2023年02月14日 02:52/ 0 赞/ 8 阅读

相关 ElementUI-textarea文本域高度自适应设置的方法

一、概述 textarea默认情况下，当超出范围后，会在右边显示滑动条 ![b0773135d85317606b5e96db93fd9ee1.png][] 体验不太

àì夳堔傛蜴生んèń/ 2023年01月13日 09:17/ 0 赞/ 377 阅读

相关使用contenteditable+div模拟textarea文本域实现高度自适应

原文出处：[https://blog.csdn.net/weixin\_34297300/article/details/88947042?utm\_medium=distri

太过爱你忘了你带给我的痛/ 2022年12月21日 10:59/ 0 赞/ 179 阅读

相关 textarea的高度自适应

textarea是一个文本框，谷歌、IE、Opera默认显示两行文本，火狐默认显示3行文本，行数超过两行是会出现滚动条，可以自己设定设定一些行数来进行强制多少行进行显示。例

柔情只为你懂/ 2022年09月29日 15:55/ 0 赞/ 308 阅读

相关 textarea 自适应内容高度

$('textarea').each(function(){ this.setAttribute('style', 'height:' + (this.s

约定不等于承诺〃/ 2022年06月09日 08:48/ 0 赞/ 294 阅读

相关 textarea高度自适应

之前虽然写了几篇关于textarea的高度自适应的解决方案，但都不甚满意，最近从Element的源码中得到启示，就自己写了一个textarea高度自适应的jquery插件。

ゞ浴缸里的玫瑰/ 2022年06月02日 07:09/ 0 赞/ 391 阅读

相关 textarea高度自适应

方法一、直接在textarea中添加oninput方法： <textarea οninput="this.style.height = this.scrollHeight +

超、凢脫俗/ 2022年04月05日 15:40/ 0 赞/ 364 阅读

相关 textarea高度自适应

textarea的高度根据键入的长度自适应高度，利用input事件，获取长度和设置高度； document.getElementById("text-adaption

谁践踏了优雅/ 2022年04月04日 06:22/ 0 赞/ 395 阅读

相关 html textarea文本域高度自适应

1、可直接在 [菜鸟教程网站测试页面中测试][Link 1] <!DOCTYPE html> <html> <head> <meta cha

怼烎@/ 2022年03月17日 13:10/ 0 赞/ 328 阅读

相关编写自适应高度的 textarea

文本框是很常见的输入控件，我相信只要写过表单的肯定接触过 [textarea][] 这个元素。 OK。但是现在产品经理说了：需要这个文本框可以根据用户输入内容自适应其高度。

﹏ヽ暗。殇╰゛Y/ 2022年03月07日 13:48/ 0 赞/ 541 阅读