textarea自动顺应内容大小 _Web前端

textarea自动适应内容大小

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

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

<span style="font-size:12px;"><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>

</span>

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

4楼lfmilaoshi14小时前: 用户是上帝。。。米老师

3楼mazhaojuan14小时前: 善于发现问题的眼睛……

2楼liushuijinger昨天 01:41: 顶

1楼lfsfxy9前天 09:57: textarea也有行列? n对于textarea的列项,我没接触过.不过你这样写的确可以实现自适应.n可以封装一下,成自己的组件.