html textarea文本域高度自适应

最新推荐文章于 2024-04-21 10:52:15 发布
最新推荐文章于 2024-04-21 10:52:15 发布
阅读量514 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000018271636
版权

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>
weixin_33991418
关注
html文本域 高度自适应,实现高度内容自适应的 textarea
weixin_39640573的博客
06-18 1544
背景介绍正如我们所知道的 textarea 是一个行内块元素 display: inline-block 并且它的默认宽高由 cols & rows 决定, 也就是说 textarea 的 height 并不会自适应于内容长度.那么, 我们今天的任务就是来思考如何创建一个 高度内容自适应的 textarea 组件，我将介绍三种思路实现 高度内容自适应的 textarea，具体代码 text...
html文本域自动自适应,【Javascript】文本框textarea高度随内容自适应增长收缩
weixin_42232139的博客
05-31 724
之前一段时间项目中用到的一个功能，用Javascript控制文本框textarea高度随内容自适应增长收缩，今天花了点时间换了种实现方法，总结一下。直接上代码：方案一：枫芸志 » 文本框textarea高度自适应增长/伸缩textarea { height:100px; width: 300px; }晴枫制作http://witmax.cn// 最小高度var minHeight = 100;//...
html textarea文本域高度自适应
weixin_40841731的博客
02-24 1211
1、可直接在 菜鸟教程网站测试页面中测试 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"&gt;&lt;/script&gt; &amp
HTML textarea高度自适应
leng0920的博客
01-16 550
html: <textarea name="textarea"id="textarea_id"style='overflow-y: hidden;height:30px'onpropertychange="this.style.height = this.scrollHeight + 'px';"oninput="this.style.height = this.scrollHe...
实现HTML中的textarea元素自适应高度
weixin_55513715的博客
04-21 216
【代码】实现HTML中的textarea元素自适应高度。
textarea文本域宽度和高度width及height自动适应实现代码
09-28
本文将详细介绍如何通过JavaScript和CSS来实现`textarea`文本域的宽度和高度自适应。 首先，对于宽度的自动适应，通常我们希望`textarea`能填满其父容器的宽度。在HTML中，我们可以给`textarea`添加一个CSS类，如`...
html5 textarea高度自适应,textarea 高度自适应的两种方案
weixin_39801714的博客
06-20 754
原标题：textarea 高度自适应的两种方案本文转载于 SegmentFault 社区社区专栏：前端学习路-郭盖作者： 郭盖阅读全文你将获得以下解决方案：1. 点击长文本编辑textarea，自动获得焦点2. 随着输入值自动伸缩高度3. 可复制添加信息4. 可粘贴文本5. 可粘贴图片以下实例代码执行环境为 Chrome80方案一HTML5 Textarea 元素1. 自动获得焦点点击编辑自动获得...
html textare自动适应,让文本框textarea自动适应内容的高度
weixin_35715490的博客
05-30 471
方法一:onfocus="window.activeobj=this;this.clock=setInterval(function(){activeobj.style.height=activeobj.scrollHeight+'px';},200);" onblur="clearInterval(this.clock);">方法二:var agt = navigator.userAgen...
html里创建textarea,如何创建一个高度自适应的textarea
weixin_34997593的博客
07-04 336
确实我在考虑这个功能的时候，已经测试了很多方案，除了你说的两个方案我还使用了一个方案，这个方案我正在测试，但是如果能改进一些小毛病的话，体验肯定比当前的要好。我是这样考虑的，既然scrollHeight不可信，那么我们就要寻找一个可信的height标准。我们另外创建一个div，让它的css完全继承自这个textarea，因为div的height是可以自由浮动伸缩的，所以我们截获textarea的k...
textarea实现高度自适应
Rujh520的博客
04-11 590
【代码】textarea实现高度自适应。
html5高度代码,做一个能自适应高度的textarea的示例代码
weixin_30194029的博客
06-20 892
方法1. html结构：2. css代码：* {padding: 0;margin: 0;}#container {width: 300px;padding: 10px;border: 1px solid #eee;box-sizing: border-box;}textarea {display: block;width: 100%;font-size: 20px;color: #000;lin...
html text自动变高,HTML的TextArea标记跟随文本内容自动设置高度
weixin_42635849的博客
05-31 531
function get_text_rows(text) {return text.split("\n").length;}$(document).ready(function () {document.getElementById('ctl00_jiSubCon_txtJobDescribe').rows = get_text_rows($('#ctl00_jiSubCon_txtJobDesc...
html textarea高度自适应,textarea高度自适应
weixin_28938701的博客
06-26 191
/*** 文本框根据输入内容自适应高度* @author tang bin* @version 0.2* @param {HTMLElement} 输入框元素* @param {Number} 设置光标与输入框保持的距离(默认20)* ...
textarea自动适应内容大小
指尖思维
06-17 4535
不同客户对相同功能的展现效果是有所不同的，拿文本内容的显示来讲，过多的内容可以有多种办法解决掉，可以在内容超过一定范围后出现滚动条，也可以随着内容的增多不断增加控件大小。本文简单展示textarea标签随内容增多不断增高。效果如下图所示：原理很简单：textarea预先制定有行数和列数（以rows和cols来计算），当我们输入内容或者加载带显示内容时，判断其总行数，然后根据textarea本身的列
html文本框自适应高度,文本框根据输入内容自适应高度 (没有滚动条)
weixin_35626408的博客
06-03 626
文本框根据输入内容自适应高度h2 {text-align: center;margin: 50px auto;}#textarea {display: block;margin: 0 auto;overflow: hidden;width: 550px;font-size: 14px;height: 18px;line-height: 24px;padding: 2px;}textarea {ou...
文本框和文本域的区别
最新发布
07-19
文本域通常有固定的行数限制，也可以自适应高度，以容纳更多的文本。 文本域通常带有滚动条，用户可以在其中自由编辑多段文字，并且支持换行符。由于其灵活性较高，常用于需要用户输入详细信息的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值