这个是用jquery的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("#ttt").bind("keydown keyup",function(){
$(this).autosize();
}).show().autosize();
});
$.fn.autosize = function(){
$(this).height('0px');
var setheight = $(this).get(0).scrollHeight;
if($(this).attr("_height") != setheight)
$(this).height(setheight+"px").attr("_height",setheight);
else
$(this).height($(this).attr("_height")+"px");
}
-->
</script>
</head>
<body>
<textarea id="ttt" rows="1" cols="100" style="overflow:hidden;"></textarea>
</body>
</html>
下面这个没有用到jquery的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<textarea id="tValue" style="overflow-y:hidden; height:18px;" onpropertychange="this.style.height='0px';this.style.height=this.scrollHeight + 'px'" oninput="this.style.height='0px';this.style.height=this.scrollHeight + 'px'" ></textarea>
</BODY>
</HTML>
（YY一下在onpropertychange里不要使用this.style.height='0px';要不在IE下会有问题）。
分享到：
相关推荐
然而，通过一些JavaScript库或自定义脚本，我们可以使textarea的高度动态适应内容的变化。这篇博客（链接：https://xiaojin21cen.iteye.com/blog/1560814）可能详细介绍了如何使用JavaScript来实现这一特性。 实现...
在Vue.js框架中，开发网页应用时，我们经常会遇到需要创建一个可以自动调整高度的textarea元素，以适应用户输入的大量文本。这个功能对于避免显示滚动条和保持页面整洁至关重要。下面将详细介绍如何使用Vue自定义...
为了解决这个问题，我们可以使用jQuery来创建一个插件，该插件能够在用户输入或修改文本时，自动调整TextArea的高度，以适应当前文本量。这种技术被称为“高度自适应”。 ### 二、代码解析 #### 1. 初始化设置 在...
这段代码会在用户在`textarea`中输入文字时，自动调整其高度为内容的实际高度，从而避免了固定高度导致的显示问题。 至于去除滚动条，可以使用CSS样式来实现。对于水平滚动条，我们可以通过设置`overflow-x: hidden...
接下来是JavaScript部分，这部分代码的主要任务是监听`Textarea`上的各种事件，如`change`、`cut`、`paste`、`drop`和`keydown`，并在这些事件发生后调整`Textarea`的高度以适应其内容。这是通过`observe`函数实现的...
`react-textarea-autosize`是一个非常实用的库，它提供了一个React组件，该组件能够自动扩展textarea以适应其内容，无需手动设置高度。这极大地提高了用户体验，避免了传统textarea可能出现的滚动条和内容溢出问题。...
### 文本域自动适应高度知识点解析 在网页开发过程中，我们经常会遇到这样一个需求：当用户在文本域（`textarea`）中输入文字时，文本域的高度能够根据输入内容的多少自动进行调整，以达到更好的用户体验效果。下面...
这个插件会监听`Textarea`上的`input`和`change`事件，每当用户输入或删除文本时，都会自动调整`Textarea`的高度以适应新的内容。以下是基本的使用步骤： 1. 首先，在HTML中创建一个`Textarea`元素，确保设置好它的...
这种方式下，当输入的文本长度超过`textarea`的宽度时，它将自动增加宽度以适应内容。 ### `wrap`属性详解 `textarea`元素还有一个重要的属性——`wrap`，用于控制换行的方式。`wrap`有四种不同的值：`off`、`soft...
首先，对于宽度的自动适应，通常我们希望`textarea`能填满其父容器的宽度。在HTML中，我们可以给`textarea`添加一个CSS类，如`comments`，并设置其`width`属性为`100%`。这样，`textarea`就会自动占据父容器的全部...
ng-autosize 的 angular 版本 安装 bower install ng-autosize 使用方法: ...[removed][removed] ...textarea ng-autosize></textarea> js: var app = angular.module("myModule", ["ngAutosize"]); 许可证
为了改善这种情况，我们可以编写JavaScript代码，使textarea的高度能够根据其内容自动扩展或收缩。 jQuery插件`textareaAutoHeight`就是这样一个解决方案。这段代码定义了一个jQuery扩展方法，允许我们对textarea...
然而，标准的`textarea`在用户输入内容时并不会自动调整其大小以适应输入的文字。这可能导致用户界面不够友好，因为用户可能需要滚动查看或编辑超出可视区域的内容。为了解决这个问题，我们可以使用`textarea-...
之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩，今天花了点时间换了种实现方法，总结一下 代码如下: jQuery.fn.extend({ autoHeight: function(){ return this.each(function(){ ...
` 控制了`textarea`的高度和宽度，使其适应不同的屏幕尺寸和布局需求。 #### 外边距与内边距 - `margin: 10px auto;` 使`textarea`在其容器中居中，并提供了足够的外边距，以避免与其他元素过于拥挤。 - `padding:...
例如，使用jQuery插件`autosize`可以自动调整`textarea`的高度以适应内容： ```javascript $('textarea').autosize(); ``` ### 8. 使用框架如React或Vue 在现代前端开发中，`textarea`经常与React或Vue等框架结合...
在Element UI框架中，`autosize`属性用于自动调整`textarea`输入框的高度，以适应用户输入的内容。然而，有时默认的高度可能不满足设计需求。本文将深入探讨如何为Element UI中的`autosize textarea`设置自定义高度...
在某些场景下，我们希望文本框的高度能够自动调整，以适应用户输入的内容，即实现高度自适应增长或收缩。本文将详细介绍两种JavaScript实现textarea高度自适应的方法。 ### 方案一 这种方法利用了textarea的`...
然而，大多数情况下，`textarea`默认开启自动换行功能，无需显式设置此属性。虽然`wrap`属性在现代Web开发中使用较少，但在特定场景下，比如需要精确控制文本显示格式时，它依然能发挥作用。 ### 4. `style`属性 `...