弹性文本框

最新推荐文章于 2024-08-29 07:46:24 发布

原创最新推荐文章于 2024-08-29 07:46:24 发布 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#弹性文本框

插件文档专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一款名为Elastic的功能专一表单插件，该插件能够实现页面内textarea标签的高度自动调整，以适应不同的文本内容长度。文章提供了插件的使用方法和示例代码，并展示了如何通过简单的JavaScript代码实现类似效果。

插件类型

Elastic是一款功能专一的表单插件，他可以控制页面内表单域(textarea)标签高度自动伸缩，以适应包含的文本。应用这个插件的时候页面需要引入jquery.elastic.source.js。
插件下载地址：http://download.csdn.net/detail/hai_cheng001/7264113

<script src="jquery-2.1.0.min.js" type="text/javascript"></script>
<script src="jquery.elastic.source.js" type="text/javascript"></script>
<script type="text/javascript">
//页面加载方法
$(function() {
    $("textarea").elastic(); //应用弹性文本框
})
</script>
<textarea>
   一夜细雨清风，空气中流淌着清凉的味道，树上的叶子也渐渐变黄了，仿佛一夜之间就到了深秋。到底是九月了， 蒹葭苍苍，白露为霜。都说秋是伤感的季节，其实，秋天是带着感伤的明媚，萧瑟中隐藏着况味。
</textarea>

自力更生，不使用插件

自定义类型

<textarea name="textarea" id="textarea" style='overflow-y: hidden;height:20px' onpropertychange="this.style.height = this.scrollHeight + 'px';" oninput="this.style.height = this.scrollHeight + 'px';"></textarea>

<textarea name="textarea" id="textarea" style='overflow-y: hidden;height:20px' onpropertychange="this.style.height = this.scrollHeight + 'px';" oninput="this.style.height = this.scrollHeight + 'px';">我是内容
真的不会随内容变化吗？
其实不是的，只是楼主没有动脑筋而已</textarea>
<script>document.getElementById("textarea").style.height = document.getElementById("textarea").scrollHeight + 10 + "px";</script>