您正在使用 IPV4 [35.175.201.245] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
文本框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>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JS制作的一分钟时间按秒进行倒计时的特效代码

 

下一篇:鼠标悬停切换图片

发布日期:2021/6/15
手机扫二维码直达本页
发布时间:12:34:56
点  击:4
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....