`

textarea 输入框自适应高度

 
阅读更多

 

 jQuery • textareaAutoHeight Plugin

功能: <textarea/>输入框自适应高度
特点: 支持剪切/粘贴, 不闪屏, 体积迷你(不到1k)
兼容: 几乎所有主流浏览器(国内山寨货未测试)
演示: 见小站文章页底部的评论输入框

使用方法:
0. 检查CSS文件中所有textarea的line-height值, 若是纯数字, 给它加上单位em, 如: 1.5em. 否则IE(6|7|8)下插件失效.
1. 加载jQuery库(1.4+)
2. 加载textareaAutoHeight.js
3. 使用以下接口调用插件:
$('textarea').tah({
    moreSpace:15,   //输入框底部预留的空白, 默认15, 单位像素
    maxHeight:600,  //指定Textarea的最大高度, 默认600, 单位像素
    animateDur:200  //调整高度时的动画过渡时间, 默认200, 单位毫秒
});

 

 

 

主页:http://phoetry.me/archives/tah.html

下载:http://phoetry.me/archives/tah.html

示例:http://phoetry.me/archives/tah.html

 

 

 

http://www.open-open.com/ajax/ajax20111115104209.htm

分享到:
评论

相关推荐

    微信小程序 内容自适应textarea表单组件(autoheight_textarea)

    textarea根据内容自适应高度 组件 注意:要监听input事件改变value值 使用: &lt;autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"&gt;&lt;/autoheight_textarea&gt;

    Vue下textarea文本框根据内容自适应改变高度

    总的来说,创建Vue自定义组件`AutoHeightTextarea`可以方便地实现textarea根据内容自适应高度的效果,同时通过针对性的兼容性处理,可以确保在各种浏览器环境中都有良好的表现。在实际项目中,这样的组件可以大大...

    多行输入框自适应行数.html

    核心代码" &lt;textarea rows=1 style="font-size:16px; line-height:1.6em;" onkeyup="this.style.height=this.scrollHeight-4+'px'"&gt; &lt;/textarea&gt;

    auto-textarea:基于Vue的高度自适应文本输入框

    基于Vue的高度自适应文本输入框 Use Setup (开始) Install auto-textarea (安装) $ npm install auto-textarea --save package.json "auto-textarea": "^1.3.6" Use (如何引入) // 方法一 // import with ES6 ...

    css textarea 高度自适应,无滚动条

    以下是如何使用CSS来实现`textarea`高度自适应的方法。 首先,我们可以设置`textarea`的基本样式,例如宽度和溢出行为。例如: ```css .t_area { width: 300px; overflow-y: visible; } ``` 这段代码中,`width...

    jquery实现textarea 高度自适应

    之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下 代码如下: jQuery.fn.extend({  autoHeight: function(){  return this.each(function(){  ...

    textarea自适应高度插件textareaAutoHeight.zip

    使用以下接口调用插件:$('textarea').tah({ moreSpace:15, //输入框底部预留的空白, 默认15, 单位像素 maxHeight:600, //指定Textarea的最大高度, 默认600, 单位像素 animateDur:200 //调整高度时的动画过渡...

    解决Layui 表格自适应高度的问题

    默认情况下,Layui表格的行高是固定的,这可能导致在内容过多时表格无法自适应高度。 为了解决表格自适应高度的问题,我们可以采用以下方法: 1. **修改CSS样式**:在CSS文件或页面的部分添加自定义样式。这里的...

    jQuery.autoTextarea文本框自适应输入高度代码.rar

    《jQuery.autoTextarea文本框自适应输入高度代码详解》 在网页设计中,用户交互体验是至关重要的一个环节,其中文本输入框的优化是提升用户体验的关键因素之一。`jQuery.autoTextarea`是一个优秀的JavaScript插件,...

    div实现自适应高度的textarea实现angular双向绑定

    在开发Web应用时,我们经常需要处理用户输入的文本,特别是在聊天、评论等场景中,一个自适应高度的输入框可以提供更好的用户体验。在Angular框架中,通常使用`&lt;textarea&gt;`元素来实现这样的功能,但有时`&lt;textarea&gt;`...

    autoHeightTextarea自适应高度的textarea是一款jquery插件

    `autoHeightTextarea`的核心功能在于实现textarea的高度自适应,它通过监听用户的输入事件,动态计算textarea的实际行数,并据此调整textarea的高度。这样,无论用户输入多少内容,textarea都能够保持合适的高度,...

    固定textarea文本域尺寸

    在网页设计中,`textarea` 是一种常用的HTML元素,用于创建多行文本输入框,让用户输入大段文字。默认情况下,Chrome 和其他基于 WebKit 的浏览器允许用户通过拖动textarea的角落来调整其大小,这在某些场景下是实用...

    文本框根据输入内容自适应高度的代码

    标题中的“文本框根据输入内容自适应高度的代码”指的是在网页开发中,文本框(textarea)能够自动调整其高度以适应用户输入的内容。这种功能通常用于提高用户体验,避免用户在输入大量文字时需要手动滚动或调整...

    div模拟textarea文本域实现高度自适应效果代码

    在了解如何通过div来模拟具有高度自适应效果的textarea文本域之前,我们首先要明确HTML中的textarea元素的作用和它的一些特性。textarea是一个表单元素,主要用于多行文本的输入,常见于评论输入框、微博信息输入框...

    可控制伸缩高度的textarea.rar

    在网页设计中,`textarea` 是一种常用的HTML元素,用于创建多行文本输入框,让用户可以输入大量文本。然而,标准的`textarea`...通过合理的JavaScript和CSS结合,我们可以创建出既美观又实用的自适应高度的textarea。

    随文字增加高度改变

    描述中的 "随着你写入的文字增加输入框高度改变 textarea" 进一步明确了这个功能的实现:当用户在`textarea`中输入文字,输入框的高度会自动增加以适应新增的文本行。这样的设计通常需要通过JavaScript来实现,因为...

Global site tag (gtag.js) - Google Analytics