`

textarea文本域自适应高度[自动增加高度]

阅读更多

textarea文本域自适应高度[自动增加高度]

在作为留言或者其他的网站备注的地方都是用的textarea,但是当文字多过其高度的时候,前面的文字就被顶到上面去了,要看内容还要翻上去。

当有了这个就不需要了,因为他会自动增加高度,适应当前的文字高度。

方法其实很简单,建议以后模板的作者可以加上。

1.引入Jquery.

<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
2.引入初始css.
body { background:#fff; }
textarea {width:300px; min-height:60px; overflow:hidden;}
3.加入自适应的JS
$.fn.autoHeight = function(){
	
	function autoHeight(elem){
		elem.style.height = 'auto';
		elem.scrollTop = 0; //防抖动
		elem.style.height = elem.scrollHeight + 'px';
	}
	
	this.each(function(){
		autoHeight(this);
		$(this).on('keyup', function(){
			autoHeight(this);
		});
	});

}
	
	
$('textarea[autoHeight]').autoHeight();
4.加入textarea
<div><textarea autoHeight="true">textarea</textarea></div>
分享到:
评论

相关推荐

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

    当我们决定使用div来模拟具有高度自适应效果的textarea文本域时,可以借助CSS中的min-height和max-height属性来实现。min-height属性定义了元素的最小高度,而max-height属性则定义了元素的最大高度。如果内容不足以...

    固定textarea文本域尺寸

    例如,可以添加一个“展开/收起”按钮,当用户点击时,textarea的高度会自动增加,显示更多的内容。或者,你可以使用滚动条来确保所有内容都能被查看,即使在固定的大小内。 总的来说,禁用 `textarea` 的拖动调整...

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

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

    Textarea根据内容自适应高度

    在网页设计中,有时我们需要一个`Textarea`(文本域)能根据输入的内容自动调整高度,以保持良好的用户体验,避免用户滚动浏览过长的文本。这个功能可以通过JavaScript来实现,正如标题“Textarea根据内容自适应高度...

    textarea自适应高度标签,去除难看的滚动条

    这段代码会在用户在`textarea`中输入文字时,自动调整其高度为内容的实际高度,从而避免了固定高度导致的显示问题。 至于去除滚动条,可以使用CSS样式来实现。对于水平滚动条,我们可以通过设置`overflow-x: hidden...

    textarea文本域宽度和高度width及height自动适应实现代码

    本文将详细介绍如何通过JavaScript和CSS来实现`textarea`文本域的宽度和高度自适应。 首先,对于宽度的自动适应,通常我们希望`textarea`能填满其父容器的宽度。在HTML中,我们可以给`textarea`添加一个CSS类,如`...

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

    用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条. CSS代码: 复制代码代码如下: .t_area{ width:300px; overflow-y:visible } &lt;textarea class=”t_area”&gt; 随便在这里输入内容,textarea的高度...

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

    在创建响应式布局时,确保表格能够自适应屏幕大小和内容高度是至关重要的,因为这能提供良好的用户体验。然而,在实际操作中,可能会遇到Layui表格无法自动调整高度的问题,导致内容被遮挡或者布局不协调。本文将...

    BootStrap表单控件之文本域textarea

    2. `&lt;textarea&gt;`: 这是HTML的文本域元素,`name`属性用于指定输入字段的名称,`id`用于唯一标识元素,`cols`和`rows`定义了文本域的初始宽度和高度。 3. `class="form-control"`: 这个类是Bootstrap为表单控件提供的...

    文本框属性

    `style`属性允许直接在`&lt;textarea&gt;`标签内应用CSS样式,从而实现高度定制化的设计。比如,通过设置`style="overflow:auto"`可以使文本框在内容超出时显示滚动条,`style="background-color:BFCEDC"`则改变背景颜色。...

    react-autosize

    react-textarea-autosize React 组件自动调整 textarea 高度以适应文本。安装npm install react-textarea-autosize --save 例子 var React = require ( 'react' ) ; var Textarea = require ( 'react-textarea-...

    jQuery实现textarea自动增长宽高的方法

    通过上述技术手段,可以有效地实现textarea在用户输入时根据内容的增加自动调整其尺寸的功能。这种动态调整大小的文本域给用户提供了更为人性化的交互体验,使得Web页面在用户操作过程中能够保持整洁和流畅。这也...

    jquery.elastic-1.6.11.zip

    `jQuery Elastic`是一个针对HTML `&lt;textarea&gt;` 元素的高度自适应插件,旨在解决用户在输入大量文本时,文本域高度无法自动调整的问题。这款插件能够确保文本区域随着内容的增加或减少而相应地扩展或收缩,提供更好的...

    html中textarea的使用及常见问题及案例分析

    - **rows**: 指定文本域的高度,以行数为单位。 - **accesskey**: 设置访问文本域的快捷键。 - **disabled**: 如果设置,文本域将被禁用,用户无法编辑,呈现灰色。 - **readonly**: 如果设置,文本域可以被选中,但...

    【JavaScript源代码】element的表单元素使用总结.docx

    3. **文本域**:`&lt;el-input&gt;`组件加上`type="textarea"`变为多行文本输入,`rows`用于指定行数,`autosize`可使高度随内容自适应,还可以通过`:autosize="{minRows: 2, maxRows: 4}"`设置最小和最大行数。...

    HTML网页设计.pptx

    表单则是HTML中收集用户信息的重要手段,、、、和&lt;textarea&gt;等元素用于创建不同类型的输入字段,如文本框、单选按钮、复选框、下拉菜单和文本域。表单元素还可以设置默认选中、禁用等状态,以适应不同的交互需求。 ...

    HTML10笔记.pdf

    * 文本域:textarea HTML10图片 HTML10的图片用于描述网页中的图像。常用的图片元素包括: * 图片:img * 图像映射:map * 图像热点:area HTML10链接 HTML10的链接用于描述网页之间的连接。常用的链接元素包括...

Global site tag (gtag.js) - Google Analytics