用户名: 用QQ登录本站
密 码: 注册
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 劳动节 12
2021年 端午节 56
2022年 元 旦 257
2022年 春 节 288
 
  • 您现在的位置:首页 >> JS >> 内容

    文本框textarea根据输入内容行数多少自适应调节高度的

    内容摘要: !DOCTYPE htmlhtml xmlns='http://www.w3.org/1999/xhtml' headmeta http-equiv='Content-Type' content='text/html; charset=utf-8' /title文本框根据输入内容自适应高度 阿里西西特效网 js.alixixi.com/titlestyle ......

      <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml" >

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>文本框根据输入内容自适应高度 阿里西西特效网 js.alixixi.com</title>

    <style type="text/css">

    #textarea { font: 1.4em/1.8em Arial; overflow: hidden; width: 550px; height: 6em; padding:10px; }

    </style>

    <script>

    /**

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

    * @author tang bin

    * @version 0.2

    * @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.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>

    </head>

    <body style="background:#FBFCFD url(http://goo.gl/kLsZX);">

    <textarea id="textarea"></textarea>

    <script>

    var text = document.getElementById("textarea"),

    tip = '知道阿里西西吗..';


    autoTextarea(text);// 调用


    text.value = tip;


    text.onfocus = function () {

    if (text.value === tip) text.value = '';

    };

    text.onblur = function () {

    if (text.value === '') text.value = tip;

    };

    </script>

    </body>

    </html>

      版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/3/3 发布时间:16:14:13 点击:334 录入:齐天大圣
  • 上一篇:JS制作的一分钟时间按秒进行倒计时的特效代码
  • 下一篇:css3实现书本翻页效果的示例代码
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.01 Build 21.03.31(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021