成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

封裝一個(gè)自動resize的textarea（Angular）

xiaolinbang / 1948人閱讀

摘要：將的高度和設(shè)置為僅能輸入一行，這么做是為了用元素的表示其內(nèi)容的高度。在模塊內(nèi)新建一個(gè)組件。輸出屬性將會在用戶輸入的數(shù)據(jù)變化時(shí)發(fā)出數(shù)據(jù)。讓的高度始終等于的這里是直接操作，建議最好使用進(jìn)行的修改。

>> 前往stackblitz編輯代碼 核心思路

創(chuàng)建兩個(gè)textarea，這里暫取名為text和text1。（最后會將text1隱藏，調(diào)試時(shí)先讓text1顯示）。

將text1的高度和rows設(shè)置為僅能輸入一行，這么做是為了用元素的scrollHeight表示其內(nèi)容的高度。

用戶將在text中輸入，我們將輸入的值同步綁定到text1中，并通過text1的scrollHeight獲取輸入內(nèi)容的高度，并同步改變text的height。

實(shí)現(xiàn) 準(zhǔn)備工作

首先，新建一個(gè)模塊textarea.module.ts，并引入FormsModule，因?yàn)榻酉聛韺玫絥gModel進(jìn)行雙向數(shù)據(jù)綁定。

在模塊內(nèi)新建一個(gè)組件textarea。

在模塊內(nèi)exports出該組件。以后只需引入該模塊即可使用該組件。

實(shí)作

在組件模板內(nèi)寫兩個(gè)textarea，并標(biāo)記為模板變量#text和#text1。

在模板中數(shù)據(jù)綁定，并監(jiān)聽數(shù)據(jù)變化。

在textarea.component.ts中增加一個(gè)輸入屬性和一個(gè)輸出屬性。輸入屬性maxHeight表示textarea的heigh的極限。輸出屬性valChange將會在用戶輸入的數(shù)據(jù)變化時(shí)發(fā)出數(shù)據(jù)。

 @Input("max-height") maxHeight = 100;
 @Output("valChange") valChange = new EventEmitter();

在textarea.component.ts中寫模板中調(diào)用的onChange方法。讓text的高度始終等于text1的scrollHeight；這里是直接操作Dom，建議最好使用Renderer2進(jìn)行dom的修改。

 onChange() {
this.reset();
setTimeout(() => {
  this.valChange.emit(this.val);
  this.reset();
}, 0)

}
reset() {
    this.text1.nativeElement.style.width = (this.text.nativeElement.scrollWidth + 2) + "px";
    if (this.text1.nativeElement.scrollHeight < this.maxHeight) {
      this.text.nativeElement.style.height = (this.text1.nativeElement.scrollHeight + 2) + "px"
    }
}

注意1：這里獲取scrollwidth的目的是因?yàn)椴煌臑g覽器對滾動條的呈現(xiàn)邏輯有差異，我們在css中已經(jīng)設(shè)置了text1的overflow=hidden，始終不會讓text1出現(xiàn)滾動條，因此我們需要讓他的寬度始終等于text1的寬度，以保證當(dāng)text出現(xiàn)滾動條是他的的寬度也保持一致，從而讓scrollHeight可以完美映射到text，否則會出現(xiàn)text中明明還沒有達(dá)到邊界，高度就自行變化了。
注意2：setTimeout中的邏輯是為了應(yīng)付事件環(huán)，因?yàn)槲覀儽O(jiān)聽的是text的變化，當(dāng)text中輸入變化時(shí)，text1中通過數(shù)據(jù)綁定得到的值往往還沒有改變，需要等一個(gè)節(jié)拍。

使用

只需要監(jiān)聽輸出屬性valChange，并傳入$event就可以獲取用戶輸入了。

如有需要可以在此基礎(chǔ)上繼續(xù)擴(kuò)展，使其兼容響應(yīng)式表單。

修改樣式需要注意選擇器的權(quán)重。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99265.html

相關(guān)文章

  • 編寫自適應(yīng)高度的 textarea

    摘要：但是現(xiàn)在產(chǎn)品經(jīng)理說了需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適應(yīng)其高度。想法很簡單，當(dāng)用戶輸入的文本超過了文本框自身高度時(shí)不是會出現(xiàn)滾動條嘛，那么自然而然就能想到這個(gè)屬性。就應(yīng)該是用戶輸入文本的真實(shí)高度，至少超過文本框既定高度時(shí)是這樣。 文本框是很常見的輸入控件，我相信只要寫過表單的肯定接觸過 textarea 這個(gè)元素。 OK。但是現(xiàn)在產(chǎn)品經(jīng)理說了：需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適...

    only_do 評論0 收藏0

  • 編寫自適應(yīng)高度的 textarea

    摘要：但是現(xiàn)在產(chǎn)品經(jīng)理說了需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適應(yīng)其高度。想法很簡單，當(dāng)用戶輸入的文本超過了文本框自身高度時(shí)不是會出現(xiàn)滾動條嘛，那么自然而然就能想到這個(gè)屬性。就應(yīng)該是用戶輸入文本的真實(shí)高度，至少超過文本框既定高度時(shí)是這樣。 文本框是很常見的輸入控件，我相信只要寫過表單的肯定接觸過 textarea 這個(gè)元素。 OK。但是現(xiàn)在產(chǎn)品經(jīng)理說了：需要這個(gè)文本框可以根據(jù)用戶輸入內(nèi)容自適...

    wenzi 評論0 收藏0

  • input與textarea的區(qū)別，并用div模擬textarea

    摘要：一和的區(qū)別元素用于為基于的表單創(chuàng)建交互式控件，以便接受來自用戶的數(shù)據(jù)。 一、input 和 textarea 的區(qū)別 input： HTML 元素用于為基于Web的表單創(chuàng)建交互式控件，以便接受來自用戶的數(shù)據(jù)。 textarea： HTML 元素代表一個(gè)多行的純文本編輯控件. Write something here 區(qū)別： 標(biāo)簽是成對的，有結(jié)束標(biāo)簽進(jìn)行閉合，標(biāo)...

    dance 評論0 收藏0

  • input與textarea的區(qū)別，并用div模擬textarea

    摘要：一和的區(qū)別元素用于為基于的表單創(chuàng)建交互式控件，以便接受來自用戶的數(shù)據(jù)。 一、input 和 textarea 的區(qū)別 input： HTML 元素用于為基于Web的表單創(chuàng)建交互式控件，以便接受來自用戶的數(shù)據(jù)。 textarea： HTML 元素代表一個(gè)多行的純文本編輯控件. Write something here 區(qū)別： 標(biāo)簽是成對的，有結(jié)束標(biāo)簽進(jìn)行閉合，標(biāo)...

    txgcwm 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<