【Javascript】文本框textarea高度随内容自适应增长收缩

    之前一段时间项目中用到的一个功能,用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下。

    直接上代码:

    方案一:



    提示:你可以先修改部分代码再运行。

    方案一在各浏览器中,文本框随内容自适应增长都没有问题;但在删除内容时收缩方面表现有所差异,IE、Opera表现正常,Firefox、Chrome、Safari不会收缩。原因是文本框内容高度小于文本框高度时scrollHeight值等于文本框高度,而不是文本框内容高度。

    方案二:

    提示:你可以先修改部分代码再运行。

    方案二在各浏览器中表现相同,皆可使文本框随内容自适应增长和收缩。但有个缺憾是在文本框高度增长的时候,文本框显示会有一个跳动。

    另以上两个方案对于通过文本框右键菜单选择剪切、粘贴、删除等命令操作文本内容的情形都无效。可以说暂未找到完美的解决方案,留待以后再来研究。哪位同学如果有完美的方案的话敬请赐教!

    其他方案:

    1. A different approach to elastic textareas 方案二即参考此文后实现
    2. Build an Elastic Textarea with Ext JS
    3. Smart TextArea: scrollHeight in IE, Firefox, Opera and Safari


    本博客所有文章如无特别注明均为原创。
    复制或转载请以超链接形式注明转自枫芸志,原文地址《【Javascript】文本框textarea高度随内容自适应增长收缩
    标签:
    分享:

已经有7 条评论抢在你前面了~

  1. 沙发
    chassic 2010年6月10日 下午4:21

    第一种方法,可以判断一下浏览器
    第二种方法,使用css

    [回复]

    晴枫

    晴枫 回复:

    @chassic, 第一种方法,如判断为Firefox,如何获得文本框内容高度?
    第二种方法,不解你所谓的使用CSS是指什么,敬请指教

    [回复]

  2. 板凳
    fzqr100 2010年3月21日 下午9:15

    <textarea style=”width:100%;overflow-y:visible”>这样高度即可自动适应</textarea>

    [回复]

    晴枫

    晴枫 回复:

    @fzqr100, 你这样只是可以滚动条滚动来查看文本框范围,并不能增加用户的可视区域

    [回复]

  3. 地板
    Delbert 2010年3月18日 下午6:22

    在日志中加入代码是用的《code》(防wp转义)标签还是用的插件?就是本文中两大段代码这样。

    [回复]

    晴枫

    晴枫 回复:

    @Delbert, WordPress运行代码插件RunCode by Soncy 见http://witmax.cn/wordpress-runcode-by-soncy.html

    [回复]

无觅相关文章插件,快速提升流量