Jquery实现<textarea>根据内容自动改变大小
<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);
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。