`
othella
  • 浏览: 83197 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

采用scrollHeight来实现textarea框的自动加行或者减行

阅读更多
基于jquery实现的:
1.在textarea上绑定blur,keyup,scroll事件去check文本框的变化

2.check方法(scrollHeight)
var TEXTAREADATA = {
	minHeight:15,
	maxHeight:45,
	limitHeight:42
};
function checkIt(element){//element指textarea
	var minLimit = parseInt(TEXTAREADATA.minHeight,10);
	if (!$.browser.mozilla	){
		minLimit  += 10;
	}
	if (element[0].scrollHeight <= minLimit){
		element.css('height', TEXTAREADATA.minHeight);
		return false;
	}
	if (element[0].scrollHeight > TEXTAREADATA.limitHeight){
		element.css('height', TEXTAREADATA.maxHeight);
		return false;
	}else{	
		var newHeight = element[0].scrollHeight;
		if (!$.browser.mozilla	){
                //在FF下scrollHeight不包括padding设置的值。
			newHeight = newHeight - 10;//10这个值需要看textarea框样式,如果未设置padding,就不需要这个处理。
		}
		element.css('height', newHeight);
	}
}


在IE会随着textarea的内容变化加减行,但是FF下只有在blur事件触发后才会减行。加行都是OK的。
0
0
分享到:
评论

相关推荐

    定宽的textarea根据内容自动调整高度

    总的来说,实现定宽`textarea`根据内容自动调整高度是一个实用的前端技术,通过JavaScript监听输入事件或CSS样式调整,可以提供更好的用户体验。在实际开发中,可以根据项目需求选择合适的方法进行实现。

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

    在Vue.js框架中,开发网页应用时,我们经常会遇到需要创建一个可以自动调整高度的textarea元素,以适应用户输入的大量文本。这个功能对于避免显示滚动条和保持页面整洁至关重要。下面将详细介绍如何使用Vue自定义...

    表单美化之textarea文本域背景的美化.rar

    此外,还可以使用JS库如jQuery或者vanilla JS来实现更复杂的交互效果,如自动调整高度以适应内容、限制字符数、或者实时预览输入的markdown格式等。例如,使用vanilla JS实现自动调整高度的示例: ```javascript ...

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

    针对这些问题,我们可以采用特定的技术来实现 `textarea` 的高度自适应和去除滚动条。 首先,`textarea` 的高度自适应通常通过JavaScript库,如jQuery,来实现。jQuery 是一个强大的JavaScript库,它简化了DOM操作...

    jquery----TextArea高度自适应

    在探讨“jQuery——TextArea高度自适应”的主题时,我们深入解析了如何利用jQuery库实现文本区域(TextArea)的高度自动调整,以确保其高度能够根据输入的文本量动态变化,从而提供更好的用户体验。以下是对该主题的...

    js textarea自动增高并隐藏滚动条

    为了解决这个问题,我们可以实现一个功能,使得`textarea`能够根据其内容自动增高,并隐藏滚动条,从而保持整洁的界面。以下是对标题和描述中所述知识点的详细说明: ### 自动增高原理 在提供的代码中,`textarea`...

    jquery实现文本框textarea自适应高度

    在本文中,我们将深入探讨如何使用jQuery来实现textarea自适应高度的功能。 首先,我们需要理解默认情况下,HTML中的textarea元素有一个固定的大小,当内容超出这个大小时,会出现滚动条。为了改善这种情况,我们...

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

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

    js textarea自动下拉(带计数)图

    ### 知识点一:JS Textarea 自动下拉功能实现 #### 1.1 Textarea 基础介绍 Textarea 是 HTML 中用于输入多行文本的一个元素,它允许用户输入大量的文本信息。在网页表单中非常常见,通常用于收集用户的反馈、评论等...

    让textarea自动调整大小的js代码

    为了提供更好的用户体验,可以使用JavaScript来实现`textarea`的自动调整大小功能。本文将详细解释如何使用JavaScript代码实现这一功能,并对给出的代码进行解析。 首先,我们需要了解`textarea`的基本结构。在HTML...

    Automatic Scrolling Textarea Using HTML JavaScript.zip

    总结来说,"Automatic Scrolling Textarea Using HTML JavaScript"项目主要展示了如何结合HTML和JavaScript实现一个自动滚动的文本区域,这涉及到HTML元素的创建、JavaScript事件监听和DOM操作,以及可能的CSS样式...

    如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度

    总的来说,通过结合CSS和JavaScript,我们可以使`&lt;pre&gt;` 元素在保留格式的同时自动换行,以及让`&lt;textarea&gt;` 的高度自适应其内容。这不仅可以提升用户体验,也有助于保持页面布局的整洁。请注意,如果在实际项目中...

    Textarea根据内容自适应高度

    这个功能可以通过JavaScript来实现,正如标题“Textarea根据内容自适应高度”所描述的那样。本文将详细介绍如何使用JavaScript来控制`Textarea`的内容自适应高度,并提供相关代码示例。 首先,我们来看一下提供的...

    jquery实现textarea 高度自适应

    然后,我们可以创建一个jQuery插件来实现`textarea`的高度自适应。这段代码定义了一个名为`autoHeight`的插件方法,它接受一个jQuery对象作为参数,并遍历该对象中的每个`textarea`元素。 ```javascript jQuery.fn....

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

    在某些场景下,我们希望文本框的高度能够自动调整,以适应用户输入的内容,即实现高度自适应增长或收缩。本文将详细介绍两种JavaScript实现textarea高度自适应的方法。 ### 方案一 这种方法利用了textarea的`...

    可控制伸缩高度的textarea.rar

    这段代码首先将textarea的高度设置为自动,然后将其高度更新为它的滚动高度(`scrollHeight`),这个属性表示元素内容的总高度,包括不可见部分,如滚动条。这样,textarea的高度就会随着用户输入的增多而自动增加。...

    文本域自动适应高度

    - **性能优化**:频繁地触发`onchange`事件可能会导致性能下降,可以通过增加延时机制或采用更高效的监听机制来优化性能。 - **用户体验**:除了自动调整高度外,还可以考虑增加其他功能来提升用户体验,例如实时...

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

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

Global site tag (gtag.js) - Google Analytics