当您在 Facebook 中输入评论时,评论文本区域会根据您的输入自动调整大小。如果您按 Enter 键,它会发布评论,如果您按 Ctrl + Enter 键,它会在调整大小时转到下一行。
我正在寻找一个可以实现相同功能的 javascript/jquery 插件。
在您键入时平滑地调整文本区域大小,就像 Facebook 一样,适用于所有新浏览器
能够动态调用,例如,如果通过 javascript 添加新的文本区域,则可以在该文本区域之后立即调用它并将其分配给该文本区域。
有一个选项/功能可以忽略输入并调用回调函数,而不是在用户按下输入时发布用户输入的内容。
当按下 ctrl + Enter 时,有一个选项/功能会被推送到新行。
有什么建议吗?
最佳答案
我不知道是否已经存在这样的插件,但如果您没有找到,您可以制作自己的插件。我很快就想出了这个,也许你可以使用它作为起始模板(它绝不是完美的,也不是你需要的一切):
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
(function($) {
$.fn.smartText = function(options) {
var $this = $(this);
var defaults = {
size_interval : 15
};
var settings = $.extend({}, defaults, options);
$('body').append('<div id="checkValHeight" style="display:none; word-wrap:break-word"></div>');
var checkValHeight = $('#checkValHeight');
$this.each(function() {
$this.addClass('smartText');
});
$('textarea.smartText').live('keyup paste', function() {
var $this = $(this);
var cur_height = $this.height();
checkValHeight
.css({
'width': $this.width()
})
.html($this.val());
if(checkValHeight.height() > cur_height) {
$this.css({
'height': (cur_height + settings.size_interval) + 'px'
});
}
checkValHeight.empty();
});
return $this;
}
})(jQuery);
</script>
<script>
$(function() {
$('textarea').smartText({
size_interval: 30
});
$('#addTextArea').click(function() {
$('body').append('<textarea class="smartText"></textarea>');
return false;
});
});
</script>
</head>
<body>
<a href="#" id="addTextArea">Add Textarea [+]</a><br />
<textarea></textarea>
<textarea></textarea>
</body>
</html>
关于javascript - 寻找类似于 facebook 的文本区域调整大小插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11724767/