Javascript jQuery自动调整大小功能导致浏览器跳转
我喜欢这个文本扩展器，因为它不会像其他人在计算调整大小时那样偶尔锁定键盘。然而，当我使用它时，当它调整大小时，浏览器有时会跳到页面顶部（而不是停留在我滚动到的页面中的点上）。有没有关于如何解决这个问题的建议Javascript jQuery自动调整大小功能导致浏览器跳转,javascript,jquery,Javascript,Jquery,我喜欢这个文本扩展器，因为它不会像其他人在计算调整大小时那样偶尔锁定键盘。然而，当我使用它时，当它调整大小时，浏览器有时会跳到页面顶部（而不是停留在我滚动到的页面中的点上）。有没有关于如何解决这个问题的建议 /** * TextAreaExpander plugin for jQuery * v1.0 * Expands or contracts a textarea height depending on the * quatity of content entered by the
/**
* TextAreaExpander plugin for jQuery
* v1.0
* Expands or contracts a textarea height depending on the
* quatity of content entered by the user in the box.
*
* By Craig Buckler, Optimalworks.net
*
* As featured on SitePoint.com:
* http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/
*
* Please use as you wish at your own risk.
*/
/**
* Usage:
*
* From JavaScript, use:
* $(<node>).TextAreaExpander(<minHeight>, <maxHeight>);
* where:
* <node> is the DOM node selector, e.g. "textarea"
* <minHeight> is the minimum textarea height in pixels (optional)
* <maxHeight> is the maximum textarea height in pixels (optional)
*
* Alternatively, in you HTML:
* Assign a class of "expand" to any <textarea> tag.
* e.g. <textarea name="textarea1" rows="3" cols="40" class="expand"></textarea>
*
* Or assign a class of "expandMIN-MAX" to set the <textarea> minimum and maximum height.
* e.g. <textarea name="textarea1" rows="3" cols="40" class="expand50-200"></textarea>
* The textarea will use an appropriate height between 50 and 200 pixels.
*/
(function($) {
// jQuery plugin definition
$.fn.TextAreaExpander = function(minHeight, maxHeight) {
var hCheck = !($.browser.msie || $.browser.opera);
// resize a textarea
function ResizeTextarea(e) {
// event or initialize element?
e = e.target || e;
// find content length and box width
var vlen = e.value.length, ewidth = e.offsetWidth;
if (vlen != e.valLength || ewidth != e.boxWidth) {
if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = "0px";
var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax));
e.style.overflow = (e.scrollHeight > h ? "auto" : "hidden");
e.style.height = h + "px";
e.valLength = vlen;
e.boxWidth = ewidth;
}
return true;
};
// initialize
this.each(function() {
// is a textarea?
if (this.nodeName.toLowerCase() != "textarea") return;
// set height restrictions
var p = this.className.match(/expand(\d+)\-*(\d+)*/i);
this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0);
this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999);
// initial resize
ResizeTextarea(this);
// zero vertical padding and add events
if (!this.Initialized) {
this.Initialized = true;
$(this).css("padding-top", 0).css("padding-bottom", 0);
$(this).bind("keyup", ResizeTextarea).bind("focus", ResizeTextarea);
}
});
return this;
};
})(jQuery);
/**
*用于jQuery的TextAreaExpander插件
*v1.0
*扩展或收缩文本区域高度取决于
*用户在框中输入的内容数量。
*
*作者：Craig Buckler，Optimalworks.net
*
*如SitePoint.com上所述：
* http://www.sitepoint.com/blogs/2009/07/29/build-auto-expanding-textarea-1/
*
*请随意使用，风险自负。
*/
/**
*用法：
*
*在JavaScript中，使用：
*$（）.TextAreaExpander（，）；
*其中：
*是DOM节点选择器，例如“textarea”
*以像素为单位的最小文本区域高度（可选）
*以像素为单位的最大文本区域高度（可选）
*
*或者，在HTML中：
*为任何标记指定一个“扩展”类。
*例如。
*
*或者指定一个“expandMIN MAX”类来设置最小和最大高度。
*例如。
*文本区域将使用50到200像素之间的适当高度。
*/
（函数（$）{
//jQuery插件定义
$.fn.TextAreaExpander=函数（最小高度、最大高度）{
var hCheck=！（$.browser.msie | |$.browser.opera）；
//调整文本区域的大小
函数ResizeTextarea（e）{
//事件还是初始化元素？
e=e.target | e；
//查找内容长度和框宽度
var vlen=e.value.length，ewidth=e.offsetWidth；
if（vlen！=e.valLength | | ewidth！=e.boxWidth）{
如果（hCheck&（vlenh？“自动”：“隐藏”）；
e、 style.height=h+“px”；
e、 valLength=vlen；
e、 箱宽=宽度；
}
返回true；
};
//初始化
这个。每个（函数（）{
//是文本区吗？
if（this.nodeName.toLowerCase（）！=“textarea”）返回；
//设置高度限制
var p=this.className.match（/expand（\d+）\-*（\d+）*/i）；
this.expandMin=minHeight | |（p？parseInt（'0'+p[1]，10）：0）；
this.expandMax=maxHeight | |（p？parseInt（'0'+p[2]，10）：99999）；
//初始调整大小
重新调整区域（此区域）；
//零垂直填充和添加事件
如果（！this.Initialized）{
this.Initialized=true；
$（this.css（“padding top”，0）.css（“padding bottom”，0）；
$（this）.bind（“keyup”，ResizeTextarea）.bind（“focus”，ResizeTextarea）；
}
});
归还这个；
};
})（jQuery）；
- 如果只分配
类，则插件不适用，尽管有文档说明expand - 在JavaScript中，函数、方法和属性名称以小写字母开头是一种习惯
- 浏览器嗅探实际上总是错误的。你想用它解决什么问题？它真的适用于所有版本的IE（甚至IE9）和Opera吗？甚至在标准模式下
- 在DOM元素引用上创建自定义属性被认为是不好的形式，因为它们不是本机JavaScript对象，因此可能不支持自定义属性。还有一个危险，其他插件使用相同的属性名。相反，请使用jQuery的
方法并选择更多唯一的属性名称，例如带有前缀的属性名称.data（） - 我不太喜欢在两件不同的事情上使用相同的参数。至少为参数指定一个比
更好的名称，例如eeventOrTarget