/*
Auto-growing textareas; technique ripped from Facebook
(Textarea need set style "overflow:hidden" under IE)
*/
(function($) {
function times(string, number) {
for (var i = 0, r = ''; i < number; i ++) r += string;
return r;
}
$.fn.autogrow = function(options) {
this.filter('textarea').each(function() {
this.timeoutId = null;
var $this = $(this), minHeight = $this.height();
var shadow = $('<div></div>').css({
position: 'absolute',
wordWrap: 'break-word',
top: 0,
left: -9999,
display: 'none',
width: $this.width(),
fontSize: $this.css('fontSize'),
fontFamily: $this.css('fontFamily'),
lineHeight: $this.css('lineHeight')
}).appendTo(document.body);
var update = function() {
var val = this.value.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/&/g, '&')
.replace(/\n$/, '<br/> ')
.replace(/\n/g, '<br/>')
.replace(/ {2,}/g, function(space) { return times(' ', space.length -1) + ' ' });
shadow.html(val);
$(this).css('height', Math.max(shadow.height(), minHeight));
}
var updateTimeout = function() {
clearTimeout(this.timeoutId);
var that = this;
this.timeoutId = setTimeout(function(){ update.apply(that); }, 100);
};
$(this).change(update).keyup(updateTimeout).keydown(updateTimeout);
update.apply(this);
});
return this;
}
})(jQuery);
使用例子：
<!DOCTYPE HTML>
<html>
<head>
<script src="jquery.js"></script>
<script src="jquery.autogrow.textarea.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$("textarea").autogrow();
});
</script>
</head>
<body>
<textarea id="t1" style="overflow:hidden"></textarea>
</body>
</html>
分享到：
相关推荐
这个插件会监听`Textarea`上的`input`和`change`事件，每当用户输入或删除文本时，都会自动调整`Textarea`的高度以适应新的内容。以下是基本的使用步骤： 1. 首先，在HTML中创建一个`Textarea`元素，确保设置好它的...
但是，这些属性并不能让`textarea`根据内容动态调整大小。要实现自动调整高度的功能，我们需要借助JavaScript或者CSS的一些技巧。 一种常见的JavaScript解决方案是监听`textarea`的`input`事件，当用户输入内容时，...
本篇文章将详细介绍基于jQuery的"autoresize"插件，以及如何使用它来自动改变textarea的大小。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。"autoresize"插件是jQuery的一个扩展，...
要禁用 `textarea` 的拖动调整大小功能，可以通过CSS样式来实现。关键在于设置 `resize` 属性。`resize` 属性决定了一个元素是否可由用户调整其大小。它有以下几个可选值： 1. `none` - 禁止元素的大小调整。 2. `...
Textarea自动调整大小自动将textarea调整为其内容的大小。安装$ npm install @github/textarea-autosize用法必须在<textarea>上显式激活自动调整大小的行为。 import autosize from '@github/textarea-...
同时，我们还监听了`value`属性的变化，当父组件传递的值改变时，也会自动调整高度。 在样式部分，我们设置了`.auto-height-textarea`的宽度为100%，使其充满容器。 然而，IE浏览器有一个已知问题，即在某些情况下...
通过对`textarea`元素的宽度和高度进行合理的设置，可以实现其根据内容的变化自动调整大小的功能。此外，通过合理设置`wrap`属性，还可以更好地控制文本的换行方式，使得用户输入更加灵活便捷。这些技术在实际开发中...
需要注意的是，`autosize`主要关注高度的调整，宽度通常不会自动改变，因为宽度可能受到布局和设计的限制。如果需要同时调整宽度，可能需要自定义解决方案或寻找其他支持宽度自动调整的库。 此外，对于移动设备或...
为了提供更好的用户体验，可以使用JavaScript来实现`textarea`的自动调整大小功能。本文将详细解释如何使用JavaScript代码实现这一功能，并对给出的代码进行解析。 首先，我们需要了解`textarea`的基本结构。在HTML...
textarea 自适应大小 兼容Chrome ie等浏览器，自动调整大小
这个"自动调整大小文本框控件"是FLEX开发中的一个实用组件，它解决了在显示动态内容时，文本框尺寸需要随内容长度变化的问题。通过这样的组件，开发者可以创建更灵活、用户体验更佳的界面。 首先，我们来看...
例如，使用jQuery插件`autosize`可以自动调整`textarea`的高度以适应内容： ```javascript $('textarea').autosize(); ``` ### 8. 使用框架如React或Vue 在现代前端开发中，`textarea`经常与React或Vue等框架结合...
Textarea-自动调整大小自动调整文本区域的大小步骤1： 在页面底部包含 textarea-autoresize.min.js 第2步： 给要自动调整大小的 textarea(s) 类“textarea-auto-resize” 第 3 步： 利润
` 定义了`textarea`中文字的字体和大小，确保了文本的可读性和一致性。 - `height: 160px;` 和 `width: 100%;` 控制了`textarea`的高度和宽度，使其适应不同的屏幕尺寸和布局需求。 #### 外边距与内边距 - `margin...
这种自动调整高度的功能使得用户在填写长文本时，界面始终保持整洁，无需手动滚动或调整窗口大小。它通过计算textarea的理想高度并应用CSS样式来实现这一效果，确保了性能和响应速度。 安装`react-textarea-...
textarea根据内容自适应高度 组件 注意：要监听input事件改变value值 使用： <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
通过以上步骤，我们就能实现一个高度自适应的`TextArea`，确保用户始终能看到所有输入的内容，而无需手动调整大小。 在提供的压缩包文件“高度自适应的TEXTAREA”中，可能包含了实现上述功能的源代码示例。如果你...
若想让背景图片随`textarea`内容的多少自动调整大小，可以利用`background-size`属性。例如，可以将背景图片设为完全覆盖`textarea`： ```css textarea { background-size: cover; } ``` 最后，为了确保在不同...
现在，我们可以编写jQuery代码来监听textarea的`input`事件，这个事件会在textarea内容改变时触发。当textarea内容发生变化时，我们将计算新的行数并据此调整textarea的`rows`属性： ```javascript $(document)....