zoukankan      html  css  js  c++  java
  • textarea随内容自动增加高度

    var autoTextarea = function (elem, extra, maxHeight) {
    extra = extra || 0;
    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.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();
    };
    var text = document.querySelectorAll("textarea");
    for(var a=0;a<text.length;a++){
    autoTextarea(text[a])
    }

  • 相关阅读:
    【洛谷4657】[CEOI2017] Chase(一个玄学的树形DP)
    Tarjan在图论中的应用(二)——用Tarjan来求割点与割边
    Tarjan在图论中的应用(一)——用Tarjan来实现强连通分量缩点
    jquery放大镜
    自定义上传按钮样式
    一些设计理论资料
    jquery滚动条
    全栈工程师到底有什么用(转)
    巧用CSS文件愚人节恶搞(转)
    仿双色球-随机产生7个数字
  • 原文地址:https://www.cnblogs.com/sunjinggege/p/7048873.html
Copyright © 2011-2022 走看看