jquery.autosize.js (by Jack Moore) textarea的初始化高度有关问题
jquery.autosize.js (by Jack Moore) textarea的初始化高度问题
为了使textarea能在输入较多内容时自动增加高度(不用滚动条),
我用了jquery.autosize.js插件,但是发现一个问题,一直无法解决。
请大家帮帮忙。
试了一下jquery.autosize.js插件,基本功能都能实现,
但是,它总是以它默认的高度显示,无法实现我下面的需求:
web页面刚打开时,textarea要保持我自己设定的高度,
textarea里的内容清空时,想恢复到我自己设定的高度。
我用jquery.autosize.js插件提供的demo,font-size,min-height和height都试了,都没有效果,
总是以默认的高度显示,并且,设定height的话,连自动增高效果都没有了。
百度了很多,没有问这个问题的。。。。很受伤啊。
拜托大家了。
------解决思路----------------------
应该是版本不同吧,我用的是低版本的
------解决思路----------------------
为了使textarea能在输入较多内容时自动增加高度(不用滚动条),
我用了jquery.autosize.js插件,但是发现一个问题,一直无法解决。
请大家帮帮忙。
试了一下jquery.autosize.js插件,基本功能都能实现,
但是,它总是以它默认的高度显示,无法实现我下面的需求:
web页面刚打开时,textarea要保持我自己设定的高度,
textarea里的内容清空时,想恢复到我自己设定的高度。
我用jquery.autosize.js插件提供的demo,font-size,min-height和height都试了,都没有效果,
总是以默认的高度显示,并且,设定height的话,连自动增高效果都没有了。
百度了很多,没有问这个问题的。。。。很受伤啊。
拜托大家了。
------解决思路----------------------
应该是版本不同吧,我用的是低版本的
------解决思路----------------------
/*!
Autosize v1.17.7 - 2013-09-03
Automatically adjust textarea height based on user input.
(c) 2013 Jack Moore - http://www.jacklmoore.com/autosize
license: http://www.opensource.org/licenses/mit-license.php
*/
(function (e) {
"function" == typeof define && define.amd ? define(["jquery"], e) : e(window.jQuery
------解决思路----------------------
window.$)
})(function (e) {
var t, o = {
className: "autosizejs",
append: "",
callback: !1,
resizeDelay: 10
},
i = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
n = ["fontFamily", "fontSize", "fontWeight", "fontStyle", "letterSpacing", "textTransform", "wordSpacing", "textIndent"],
s = e(i).data("autosize", !0)[0];
s.style.lineHeight = "99px",
"99px" === e(s).css("lineHeight") && n.push("lineHeight"),
s.style.lineHeight = "",
e.fn.autosize = function (i) {
return i = e.extend({
},
o, i
------解决思路----------------------
{
}),
s.parentNode !== document.body && e(document.body).append(s),
this.each(function () {
function o() {
var t, o;
"getComputedStyle" in window ? (t = window.getComputedStyle(h), o = h.getBoundingClientRect().width, e.each(["paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"],
function (e, i) {
o -= parseInt(t[i], 10)
}), s.style.width = o + "px") : s.style.width = Math.max(p.width(), 0) + "px"
}
function a() {
var a = {
};
if (t = h, s.className = i.className, d = parseInt(p.css("maxHeight"), 10), e.each(n,
function (e, t) {
a[t] = p.css(t)
}), e(s).css(a), o(), window.chrome) {
var r = h.style.width;
h.style.width = "0px",
h.offsetWidth,
h.style.width = r
}
}
function r() {
var e, n;
t !== h ? a() : o(),
s.value = h.value + i.append,
s.style.overflowY = h.style.overflowY,
n = parseInt(h.style.height, 10),
s.scrollTop = 0,
s.scrollTop = 9e4,
e = s.scrollTop,
d && e > d ? (h.style.overflowY = "scroll", e = d) : (h.style.overflowY = "hidden", c > e && (e = c)),
e += f,
n !== e && (h.style.height = e + "px", w && i.callback.call(h, h))
}
function l() {
clearTimeout(u),
u = setTimeout(function () {
var e = p.width();
e !== y && (y = e, r())
},
parseInt(i.resizeDelay, 10))
}
var d, c, u, h = this,
p = e(h),
f = 0,
w = e.isFunction(i.callback),
z = {
height: h.style.height,
overflow: h.style.overflow,
overflowY: h.style.overflowY,
wordWrap: h.style.wordWrap,
resize: h.style.resize
},
y = p.width();
p.data("autosize")
------解决思路----------------------
(p.data("autosize", !0), ("border-box" === p.css("box-sizing")
------解决思路----------------------
"border-box" === p.css("-moz-box-sizing")
------解决思路----------------------
"border-box" === p.css("-webkit-box-sizing")) && (f = p.outerHeight() - p.height()),
c = Math.max(parseInt(p.css("minHeight"), 10) - f
------解决思路----------------------
0, p.height()),
p.css({
overflow: "hidden",
overflowY: "hidden",
wordWrap: "break-word",
resize: "none" === p.css("resize")
------解决思路----------------------
"vertical" === p.css("resize") ? "none" : "horizontal"
}), "onpropertychange" in h ? "oninput" in h ? p.on("input.autosize keyup.autosize", r) : p.on("propertychange.autosize",
function () {
"value" === event.propertyName && r()
}) : p.on("input.autosize", r), i.resizeDelay !== !1 && e(window).on("resize.autosize", l), p.on("autosize.resize", r), p.on("autosize.resizeIncludeStyle",
function () {
t = null,
r()
}), p.on("autosize.destroy",
function () {
t = null,
clearTimeout(u),
e(window).off("resize", l),
p.off("autosize").off(".autosize").css(z).removeData("autosize")
}), r())
})
}
});