Heim  >  Artikel  >  Web-Frontend  >  文本框根据输入内容自适应高度的代码_表单特效

文本框根据输入内容自适应高度的代码_表单特效

WBOY
WBOYOriginal
2016-05-16 18:00:201015Durchsuche

其实现代浏览器大多都支持文本框尺寸调节功能,绝大多数情况下却没有自动适应来得爽快,在网络上发现一方法比较简单的实现文本框高度自适应,于是封装了这个函数,准备以后应用到项目中。
源代码:
23:03文章更新:
感谢alucelx同学再次给力的帮助,大大简化了方法,更新代码为0.2版本,同时解决了兼容Opera浏览器,至此全兼容IE6+与现代浏览器!
在线演示: http://demo.jb51.net/js/2011/autoArea/index.htm
autoTextarea.js

复制代码 代码如下:

/**
* 文本框根据输入内容自适应高度
* @author tang bin
* @version 0.3
* @see http://www.planeart.cn/?p=1489
* @param {HTMLElement} 输入框元素
* @param {Number} 设置光标与输入框保持的距离(默认20)
* @param {Number} 设置最大高度(可选)
*/
var autoTextarea = function (elem, extra, maxHeight) {
extra = extra || 20;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function (type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function (name) {
var val = elem.currentStyle[name];
if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};
return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));
elem.style.maxHeight = elem.style.resize = 'none';
var change = function () {
var scrollTop, height,
padding = 0,
style = elem.style;
if (elem._length === elem.value.length) return;
elem._length = elem.value.length;
if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
elem.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
};
addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
};

测试代码:




文本框根据输入内容自适应高度





<script> <BR>var text = document.getElementById("textarea"), <BR>tip = '想写点什么..'; <BR>autoTextarea(text);// 调用 <BR>text.value = tip; <BR>text.onfocus = function () { <BR>if (text.value === tip) text.value = ''; <BR>}; <BR>text.onblur = function () { <BR>if (text.value === '') text.value = tip; <BR>}; <BR></script>

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn