9顶

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

稿源：互联网 2018-09-26 00:07:52 点击： 6565 撤稿纠错

一个文本框根据输入内容自适应高度的网页特效，随文字的多少增减文本框高度...

以下讨论的是和文本框自适应 textarea相关的文本框textarea根据输入内容行数多少自适应调节高度的js特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>

关于文本框textarea根据输入内容行数多少自适应调节高度的js特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092670587.shtml方便下次再访问哦。

·上一篇： 一款个性的波浪式滑动菜单特效
·下一篇： 淘宝UED的相册展示效果图片放大镜

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

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

文章分类LIST >>返回首页

最新游戏

最新新闻