textarea自动适应内容大小

最新推荐文章于 2024-06-07 09:53:05 发布

原创最新推荐文章于 2024-06-07 09:53:05 发布 · 4.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ie

html/div+css/JS/Ajax/jsp/Flex 专栏收录该内容

37 篇文章

订阅专栏

本文展示了一个自动调整大小的文本区域，通过检测输入内容的行数并相应地增加文本区域的高度，以适应不同长度的文本内容。此功能强调了在开发过程中考虑用户需求多样性的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不同客户对相同功能的展现效果是有所不同的，拿文本内容的显示来讲，过多的内容可以有多种办法解决掉，可以在内容超过一定范围后出现滚动条，也可以随着内容的增多不断增加控件大小。本文简单展示textarea标签随内容增多不断增高。效果如下图所示：

原理很简单：textarea预先制定有行数和列数（以rows和cols来计算），当我们输入内容或者加载带显示内容时，判断其总行数，然后根据textarea本身的列数（rows）来计算每行数据需要textarea多少行来展示，从而对决定是否需要增加textarea的行数（rows），达到自动适应内容的目的。简单代码如下所示：

<head>
         <script>
                   functionwinOnLoad(){

                            ResizeTextarea(textareaId1);
                            ResizeTextarea(textareaId2);
                   }

                   functionResizeTextarea(tagTextarea){

                            varexpectedRows = 3;

                       var content =tagTextarea.value.split("\r\n");

                       expectedRows += content.length;
               
                       for(var e = 0;e < content.length;e++){

                           if(content[e].length >=  tagTextarea.cols){
                                    expectedRows+= Math.ceil(content[e].length/tagTextarea.cols)
                           }

                       }

                       if(expectedRows != tagTextarea.rows){

                                tagTextarea.rows= expectedRows;

                       }

                   }

         </script>

</head>

<bodyonload="winOnLoad();">

        

         <h3>原textarea的显示效果：</h3>

         <textareaid="textareaId1" style="overflow: hidden;  font-family: Verdana,Arial; font-style:normal;  font-size: 13px; line-height:normal; " rows="4"

                   cols="30"onfocus="ResizeTextarea(this);"onclick="ResizeTextarea(this);"

                   onkeyup="ResizeTextarea(this);">

         </textarea>

         <h3>填充内容后textarea的显示效果：</h3>

         <textareaid="textareaId2" style="overflow: hidden;  font-family: Verdana,Arial; font-style:normal;  font-size: 13px; line-height:normal; " rows="4"

                   cols="30"onfocus="ResizeTextarea(this);"onclick="ResizeTextarea(this);"

         onkeyup="ResizeTextarea(this);">weweweweeeeeeeeeeeeeeeeeeeesddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

                   dddddddddddddddddddddddddddddddddddddddddddd这只是正常的文本输入的罚款。如果你也有这样的复选框或按钮来改变这样规模的其他元素，填充方法可能会适得其反，因为在IE的“宽度”的一个选择是包容性的边界和填充

         </textarea>

</body>

</html>

本功能从实现上不难，但它很好的提醒了我们用户的需求是多种多样的，即便是同类事物也会有不同的表现形式，而积累这些看似简单的小功能就显得格外重要，因为他能使我们多为客户提供一种解决方案或解决方案的零部件。