您的位置:首页 > Web前端 > JQuery

Jquery实现<textarea>根据内容自动改变大小

2014-10-15 10:13 656 查看
<script type="text/javascript" src="${webRoot}/js/jquery.autogrow.textarea.js"></script>
<h3 >任职要求</h3>
<div> <textarea style="outline:none;resize : none; BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; BORDER-RIGHT: 0px solid; BORDER-TOP: 0px solid;overflow-y:hidden" cols="120" rows="10" >${回显}</textarea></div>

jquery.autogrow.textarea.js如下:

/*
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);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jquery textarea