Textarea根據(jù)內(nèi)容自適應(yīng)高度
直接看代碼吧,很簡單,也很實(shí)用。
<!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)文章
javascript彈出一個(gè)層并增加一個(gè)覆蓋層
彈出一個(gè)層的js代碼,比較不錯(cuò)2008-10-10JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)shuffle數(shù)組洗牌操作,結(jié)合實(shí)例形式分析了javascript數(shù)組的定義、構(gòu)造、排序等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01javascript作用域容易記錯(cuò)的兩個(gè)地方分析
javascript作用域容易記錯(cuò)的兩個(gè)地方分析,學(xué)習(xí)js的朋友可以參考下2012-06-06ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法總結(jié)
echarts是我們經(jīng)常用到的數(shù)據(jù)可視化圖形,但是后端反饋給我們的數(shù)據(jù)經(jīng)常是數(shù)組包對象的集合類型,下面這篇文章主要給大家介紹了關(guān)于ECharts調(diào)用接口獲取后端數(shù)據(jù)的四種方法,需要的朋友可以參考下2022-11-11Javascript訪問html頁面的控件的方法詳細(xì)分析
這段時(shí)間在公司比較的空閑,決定研究研究javascript訪問html控件,這是很普遍的,這里我系統(tǒng)的研究javascript的訪問方式,測試通過并有下面一些研究成就,供大家分享和補(bǔ)充。2008-08-08jquery動(dòng)態(tài)添加刪除(tr/td)
這篇文章主要介紹了jquery動(dòng)態(tài)添加刪除(tr/td)的方法,需要的朋友可以參考下2015-02-02