为一个textarea的内容拉伸增加

该网站是一个矿产提示和取之不尽的思想。 互联网是由定义，其中每一天contuna测试新的想法诞生的环境，其他一些天才，只是好奇和有趣。

从网页设计，其中的“特殊效果”，我喜欢某个角度来看是一个大的文本内容由用户输入的大小而变化的动态管理。 概括地说：你写更多的内容和更大成为textarea的。 从心理学的角度看这是一个邀请，继续写的说相当于“嘿，你想要写为好，没有足够的空间。”

在这篇文章中我提出了一个简单的JavaScript函数处理这个漂亮的效果。 有问题的函数什么也不做，但延长的textarea的内容时，超过其自然能力（避免，事实上，沮丧竖条外观）。 下面的代码：

 moreWords功能（ID，maxheight）{



  



 / /创建一个变量来访问的TextArea的样式属性



  



 



 ID：的document.getElementById（ID）;



  

  



 / /如果我不能出去没有做任何事情



  



如果返回（txtarea！）;



  

  



 / /创建一个变量，最初除非textarea的当前高度



  



 VAR = newHeight txtarea.clientHeight;



  

  



 / /如果高度没有设置或者这是比目前更大的...



  



如果（maxheight |！| maxheight> newHeight）{



    

    



 / /重新定义确定newHeight越大，内容高度（scrollHeight）值和当前值



    



 newHeight = Math.max（txtarea.scrollHeight，newHeight）;



    

    



 / /如果高度已定..



    



如果（maxheight）



      



 / /重新定义newHeight值确定的最大高度（maxheight）小，它的当前值



      



 newHeight = Math.min（maxheight，newHeight）;





    



 / /如果计算出的高度（newHeight）比目前的textarea的更大



    



 / /进行更改和延长的textarea



    



如果（newHeight> txtarea.clientHeight）{



      



 txtarea.style.height newHeight = +“PX”;



      



 txtarea.style.overflow =“隐藏”;



    



 }



  



 }



  



 / /如果最大高度达到显示滚动条



  





    



 txtarea.style.overflow =“自动”;

  

  



 }

   





 }

该函数有两个参数，一个强制性的（textarea的的ID上应用效果）和一个可选的（任何以像素为单位的高度）。

关于用于创建功能的各个步骤，我相信没有什么可以补充到已有的代码注释。

该函数的使用非常简单：我们的textarea的onkeyup事件启动功能，它只是重新计算，每个按键，如果高度是张贴在适当的内容：

 



 <textarea onkeyup="moreWords(this)"> </ TEXTAREA>

 

为建议中的代码工作的例子可以被视为在这个页面 。

这个函数的唯一的限制是无法合约，如果用户删除的文字... ... 在这种情况下，textarea的仍是旧的大小减少，因为我们的代码是专为空间和它的收缩不膨胀而设计的。 但是，如果你愿意，你可以通过添加几行代码这个功能。