首页 > 其他分享 >html textarea文本域高度自适应

html textarea文本域高度自适应

时间:2022-11-29 11:40:32浏览次数:38  
标签:function textarea autoTextAreaHeight ele symptomTxt html var 文本


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>

 

 

 

 

 

 

标签:function,textarea,autoTextAreaHeight,ele,symptomTxt,html,var,文本
From: https://blog.51cto.com/u_13002884/5894590

相关文章

  • app直播源码,flutter Text自动计算文本内容的宽度
    app直播源码,flutterText自动计算文本内容的宽度一、什么是TextPainter在内容开始之前,我们先来看一下它的属性 TextPainter({  InlineSpan?text,   //Tex......
  • 强调文本的标签
    标签描述​<em>​呈现为被强调的文本。​<strong>​定义重要的文本。​<dfn>​定义一个定义项目。​<code>​定义计算机代码文本。​<samp>​定义样......
  • Google SEO & HTML5 Video Poster All In One
    GoogleSEO&HTML5VideoPosterAllInOne海报/缩略图posterAURLforanimagetobeshownwhilethevideoisdownloading.Ifthisattributeisn'tspecif......
  • 值得尝试的 30 个开源文本编辑器
    正在寻找新的文本编辑器?这里有30个编辑器可供尝试。计算机是基于文本的,因此你使用它们做的事情越多,你可能就越需要文本编辑应用程序。你在文本编辑器上花费的时间越多,......
  • 用python根据文本数据自动绘制轨迹
    1.具体步骤1.1导包importturtleast1.2设置基本参数t.title('自动轨迹绘制')t.setup(800,600,0,0)t.pencolor('red')t.pensize(5)1.3数据读取#数据读取detals......
  • html标签汇总及使用
    font标签color属性修改颜色face属性修改字体size属性修改字体大小<fontcolor="blue"size="5"face="宋体">字体</font> 常用的特殊字符怎么表示......
  • net中使用HtmlAgilityPack组件采集数据,就是这么简单
    如果要采集网页上的数据,最简单好用的是用Python语言实现,本身就是网络编程语言,有很多组件都可以使用。当然,如果你想用C#进行数据采集,也是没问题的,也有不错的组件可以使用,今......
  • 谷歌发布 AngularJS 1.0,允许扩展HTML语法
    谷歌2012年06月15日发布了一个全新的Web模板——AngularJS1.0。谷歌称,AngularJS可以让你扩展HTML的语法,以便清晰、简洁地表示应用程序中的组件,并允许将标准的HTML作为你的......
  • https://www.cnblogs.com/liyue3/p/16924616.html
    Android12源码网盘下载路径:“iTOP-3588开发板\01_【1TOP-RK3588开发板】基础资料\03_iTOP-RK3588开发板Android12源码”源码是分卷压缩包,需要全部下载下来放在同......
  • Vue富文本编辑器(vue-quill-editor)使用✔✔
    最近工作中需求使用一款富文本编辑器,最终选择了vue-quill-editor,之所以选择vue-quill-editor,是看上了它的轻量以及外观简洁的优势。打开官方文档,直接上手配置,各种报错,踩了......