Textarea根據(jù)內(nèi)容自適應(yīng)高度
更新時(shí)間：2013年10月28日 10:38:15 作者：
使用JAVASCRIPT控制Textarea內(nèi)容自適應(yīng)高度，實(shí)施起來(lái)很簡(jiǎn)單，很平滑。
直接看代碼吧，很簡(jiǎn)單，也很實(shí)用。
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>autoresizing textarea</title>
<style type="text/css">
textarea {
border: 0 none white;
overflow: hidden;
padding: 0;
outline: none;
background-color: #D0D0D0;
resize: none;
}
</style>
<script type="text/javascript">
var observe;
if (window.attachEvent) {
observe = function (element, event, handler) {
element.attachEvent('on'+event, handler);
};
}
else {
observe = function (element, event, handler) {
element.addEventListener(event, handler, false);
};
}
function init () {
var text = document.getElementById('text');
function resize () {
text.style.height = 'auto';
text.style.height = text.scrollHeight+'px';
}
/* 0-timeout to get the already changed text */
function delayedResize () {
window.setTimeout(resize, 0);
}
observe(text, 'change', resize);
observe(text, 'cut', delayedResize);
observe(text, 'paste', delayedResize);
observe(text, 'drop', delayedResize);
observe(text, 'keydown', delayedResize);
text.focus();
text.select();
resize();
}
</script>
</head>
<body onload="init();">
<textarea cols="40" rows="1" style="height:25px;" id="text"></textarea>
</body>
</html>
相關(guān)文章
JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線(xiàn)圖
這篇文章主要介紹了JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線(xiàn)圖,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JavaScript學(xué)習(xí)筆記之基于定時(shí)器實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)功能詳解
這篇文章主要介紹了JavaScript學(xué)習(xí)筆記之基于定時(shí)器實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)功能,結(jié)合實(shí)例形式分析了javascript定時(shí)器與頁(yè)面元素屬性動(dòng)態(tài)設(shè)置等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了微信小程序canvas拖拽、截圖組件功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
原生js實(shí)現(xiàn)電商側(cè)邊導(dǎo)航效果
本文主要分享了原生js實(shí)現(xiàn)電商側(cè)邊導(dǎo)航效果的示例代碼以及原理分析。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
這篇文章主要為大家詳細(xì)介紹了js圖片輪播效果實(shí)現(xiàn)原理，幫助大家更好地實(shí)現(xiàn)圖片輪播效果，真正理解圖片輪播原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-12-12
在寫(xiě)js腳本的時(shí)候我們必須對(duì)一件事保持警惕，就是避免異常的發(fā)生。在本篇文章里面，我想談?wù)勔徊糠诸?lèi)型檢測(cè)，有需要的可以參考學(xué)習(xí)。2016-07-07
JS簡(jiǎn)單實(shí)現(xiàn)String轉(zhuǎn)Date的方法
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)String轉(zhuǎn)Date的方法,涉及JavaScript字符串與日期相互轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2016-03-03
uniapp頁(yè)面通訊講解之uni.$emit、uni.$on、uni.$once和uni.$off
uni-app?是一個(gè)使用vue.js開(kāi)發(fā)所有前端應(yīng)用的框架,下面這篇文章主要給大家介紹了關(guān)于uniapp頁(yè)面通訊之uni.$emit、uni.$on、uni.$once和uni.$off的相關(guān)資料,需要的朋友可以參考下2022-09-09
JavaScript+html5 canvas繪制漸變區(qū)域完整實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas繪制漸變區(qū)域的方法,結(jié)合完整實(shí)例形式分析了canvas顏色調(diào)用與圖形繪制的相關(guān)技巧,需要的朋友可以參考下2016-01-01
Markdown+Bootstrap圖片自適應(yīng)屬性詳解
這篇文章主要為大家詳細(xì)介紹了Markdown+Bootstrap圖片自適應(yīng)屬性，感興趣的朋友可以參考一下2016-05-05