實現textarea自動撐開

需求設想

實現乙個具有預設高度，且隨著輸入內容的增加自動撐開高度的輸入框

方法

div模擬textarea實現

html:

}css:
.full-test
js:export default 
}}

這種方式能實現，但是有乙個問題，在我的vue專案中，只要一重新整理就會失效，必須重新跑服務

html:

}    
css:
.full-box
width: 100%;
height: auto;
background-color: #fff;
position: relative;
pmargin: 0;
padding: 0;
visibility: hidden;
word-wrap: break-word;
line-height: 1.16rem;
min-height: 30px;
textarea
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: left;
line-height: 1.15rem;
margin: 0;
padding: 0;
js:export default 
}}

這種方式的實現思路是textarea跟隨父元素高度，同時用兄弟原色撐開父元素即可

值得注意的點是p標籤與textarea的文字設定需要一致

/**

* 實現隨著輸入內容增多，自動增高的輸入框
* 父元件呼叫示例:
*  * @time: 2018.9.20
* @author: nick_yangxiaotong
*/}

實現 textarea隨內容高度自動變化

原理 生成乙個新的textarea，不停獲取當前textarea最新的值，然後計算高度賦給當前的textarea var addhandler window.addeventlistener?function elem,event,handler function elem,event,handle...

實現textarea標籤高度隨內容自動變化

預設情況，textarea標籤的高度是不會隨文字內容自動撐開的，即其高度固定，高度過多時會使textarea標籤出現滾動條 但是有時候會有需求 實現textarea標籤高度隨內容自動變化，那麼可以利用scrollheight屬性實現，如下 html部分 js部分 function makeexpan...

textarea 換行輸出實現

1.textarea 裡面有換行的就存在轉移字元 n 和 r 一般火狐是 n ie是 n和 r 2.實現 str post textarea 獲取textarea裡面的內容 str1 nl2br str nl2br 函式在字串中的每個新行 n 之前插入html換行符 或 echo str1 將tex...