textarea文字框高度自適應程式碼例項
預設情況下textarea文字框不能夠實現高度自適應,當輸入的內容超過文字框的高度的時候,就會出現滾動條。
下面通過程式碼例項介紹一下如何利用JavaScript實現文字框隨著內容高度自適應效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #shadow,#text{ font:12px/16px Arial; width:200px; overflow:hidden; height:16px; } #shadow{ position:absolute; border-width:0px; padding:0px; visibility:hidden; } #text{resize:none;} </style> <script type="text/javascript"> window.onload=function(){ //使用者看到的文字框 var text=document.getElementById("text"); //隱藏的文字框 var shadow=document.getElementById("shadow"); text.oninput=text.onpropertychange =onchange; function onchange(){ shadow.value=text.value; setHeight(); //針對IE 6/7/8的延遲, 否則有時會有一個字元的出入 setTimeout(setHeight,0); function setHeight(){ text.style.height=shadow.scrollHeight + "px"; } } }; </script> </head> <body> <textarea id="text"></textarea> <textarea id="shadow"></textarea> </body> </html>
上面的程式碼實現了我們的要求,下面介紹效果的實現過程。
一.程式碼註釋:
(1).window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。
(2).var text=document.getElementById("text"),獲取id屬性值為text的元素物件。
(3).var shadow=document.getElementById("shadow"),獲取id屬性值為shadow的元素物件。
(4).text.oninput=text.onpropertychange=onchange,註冊事件處理函式。
(5).function onchange(),文字框內值發生改變執行的事件處理函式。
(6).shadow.value=text.value,將顯示的文字框的值賦值給隱藏的文字框。
(7).setHeight(),此函式可以設定顯示的文字框的高度。
(8).setTimeout(setHeight,0),//針對IE 6/7/8的延遲, 否則有時會有一個字元的出入。
(9).function setHeight(){
text.style.height=shadow.scrollHeight + "px";
},將顯示的文字框高度,設定值為隱藏文字框的scrollHeight屬性值。
二.相關閱讀:
(1).oninput參閱JavaScript input 事件一章節。
(2).setTimeout()參閱setTimeout()一章節。
(3).scrollHeight屬性參閱scrollHeight屬性一章節。
相關文章
- 文字框高度自適應例項程式碼
- jQuery textarea框高度自適應jQuery
- iframe高度自適應程式碼例項
- <iframe>高度自適應程式碼例項
- input文字框實現寬度自適應程式碼例項
- textarea高度自適應詳解
- 使用CSS禁止textarea文字框調整大小程式碼例項CSS
- textarea文字框輸入文字數目倒計效果程式碼例項
- ajax應用實現iframe高度自適應程式碼例項
- jquery實現的iframe高度自適應程式碼例項jQuery
- javascript限制textarea文字框輸入字元個數程式碼例項JavaScript字元
- textarea實現高度自適應的理解
- 原生javascript實現的iframe高度自適應程式碼例項JavaScript
- css實現的規定最小高度然後高度自適應程式碼例項CSS
- 文字嵌入邊框程式碼例項
- 密碼框提示文字程式碼例項密碼
- 詳細實現微信輸入框效果(textView自適應文字高度)TextView
- 文字框與文字垂直對齊程式碼例項
- 圖片尺寸大小自適應程式碼例項
- 文字框點選清除預設文字例項程式碼
- 讓input文字框文字垂直居中程式碼例項
- 密碼框提示文字效果程式碼例項密碼
- input文字框寬度自適應
- 當前文字框高亮效果程式碼例項
- js動態建立文字框程式碼例項JS
- js實現文字框提示程式碼例項JS
- input文字框圓角效果程式碼例項
- 文字框輸入完成自動跳入下一個程式碼例項
- 移動端字型大小自適應程式碼例項
- 小程式Swiper高度自適應
- 選中文字框文字觸發事件程式碼例項事件
- 點選按鈕複製文字框文字程式碼例項
- javascript實現的iframe高度自適應程式碼JavaScript
- 移動端頁面大小自適應程式碼例項
- 微信小程式Swiper高度自適應微信小程式
- 實現一個高度自適應的輸入框
- jQuery點選文字框清除內容程式碼例項jQuery
- js判斷文字框是否為空程式碼例項JS