小程序 textarea組件層級(jí)過(guò)高導(dǎo)致文字穿透浮層的解決方法 ... ...

有的微信小程序開(kāi)發(fā)者在做小程序時(shí)，使用到了 textarea這個(gè)小程序組件，然后點(diǎn)擊頁(yè)面上的某個(gè)元素，會(huì)觸發(fā)頁(yè)面彈起一個(gè)彈窗，這時(shí)發(fā)現(xiàn) textarea的 placeholder文字或者輸入的文字內(nèi)容，會(huì)直接穿透遮罩層和浮動(dòng)彈窗，顯示在最上面。

那么這種情況要怎么解決？

小程序 textarea組件層級(jí)過(guò)高導(dǎo)致文字穿透浮層的解決方法 ：

• 隱藏 textarea

這是最簡(jiǎn)單的解決手段，一般彈窗的時(shí)候，都會(huì)帶個(gè)遮罩層，把遮罩層下面的內(nèi)容隱藏一部分，用戶基本上不會(huì)注意的，然后再去掉彈窗和遮罩層的時(shí)候再把 textarea顯示出來(lái)。 這種方法簡(jiǎn)單有效，大部分情況下都可以這么解決。

<textarea wx:if="{{ showMask }}">textarea>

• 使用替代元素

有時(shí)候， textarea穿透的不是遮罩層，或者遮罩層以一種半透明而非完全遮住頁(yè)面內(nèi)容的形式呈現(xiàn)，擔(dān)心用戶能夠看到因?yàn)?textarea的消失而導(dǎo)致頁(yè)面跳動(dòng)，產(chǎn)生不好的用戶體驗(yàn)，那么就可以使用替代元素來(lái)替代 textarea而非將之直接隱藏掉。

基本的 textarea組件只接受文本的輸入，拋開(kāi)可輸入性的話，外觀上看就是一個(gè)含有文本節(jié)點(diǎn)的簡(jiǎn)單元素，只需要獲取當(dāng)前狀態(tài)下的 textarea中輸入的文字，將之賦予給一個(gè)樣式與 textarea相同的普通元素，就達(dá)到了臨時(shí)替代的效果。

<textarea id="text-area" value="{{txtRealContent}}" bindinput='txtInput' wx:if="{{!showMask}}" />

<view class='rich-text' style="{{('height:' + txtHeight + 'px')}}" wx:else>
  <rich-text nodes="{{txtRealContent}}">rich-text>
view>
復(fù)制代碼

如上所示

• 由于需要實(shí)時(shí)獲取 textarea中已經(jīng)輸入的內(nèi)容，所以給 textarea元素加了個(gè) bindinput的監(jiān)聽(tīng)器
• showMask用于標(biāo)識(shí)是否顯示遮罩層(或者其他可能會(huì)被 textarea穿透的浮動(dòng)元素)，如果顯示遮罩層，則隱藏 textarea元素，并顯示替代原宿
• 這里 textarea的隱藏使用了 wx:if，會(huì)使其徹底地從頁(yè)面中消失，而重新顯示出來(lái)的時(shí)候，textarea元素會(huì)重新創(chuàng)建，丟失原先輸入，所以給其加了個(gè) value屬性，其值 txtRealContent就是緩存的 textarea已經(jīng)輸入的文本內(nèi)容；如果你不用這種方法，不讓 textarea完全顯示，而僅僅是隱藏，例如使用 hidden="{{ showMask ? true :false }}"，因?yàn)椴簧婕暗?textarea的刪除與重建，所以就無(wú)需添加 value屬性來(lái)控制文本內(nèi)容了。
• textarea是可以輸入可換行的文本內(nèi)容的，所以這里使用了 rich-text組件，在使用的時(shí)候，我發(fā)現(xiàn) rich-text好像不支持溢出隱藏，所以又額外在其外面包了一層 view組件，并將其高度設(shè)置為和 textarea相同

上面四個(gè)步驟，都比較簡(jiǎn)單，稍微需要注意的是，如果 textarea的內(nèi)容包含了換行文本，則需要對(duì)換行符進(jìn)行處理：

textareaContent.replace(/\n/g, '
')
復(fù)制代碼

如果你想讓 textarea自動(dòng)增加高度而不是固定高度，給 textarea加了個(gè) auto-height，那么就需要“實(shí)時(shí)”獲取其高度 說(shuō)是 “實(shí)時(shí)”，其實(shí)也并不是那么實(shí)時(shí)，不考慮其他樣式的變化， textarea的高度與行數(shù)有關(guān)，每增減一行，其高度才會(huì)變化，所以只需要監(jiān)控其內(nèi)容行數(shù)的變化即可，恰好 textarea組件也已經(jīng)提供了這個(gè)監(jiān)控器：bindlinechange。

原理說(shuō)完了，完整實(shí)例代碼如下：

index.wxml

<view class="page-body">
  <button bindtap="changeMaskVisible">切換maskbutton>
  <view class="textarea-wrp">
    <textarea id="text-area" value="{{txtContent}}" bindinput='txtInput' bindlinechange="textAreaLineChange" wx:if="{{!showMask}}" auto-height />
    <view class='rich-text' style="{{('height:' + txtHeight + 'px')}}" wx:else>
      <rich-text nodes="{{txtRealContent}}">rich-text>
    view>
  view>
  <button>Footerbutton>
  <view wx:if="{{showMask}}" bindtap="changeMaskVisible" class="mask">
    <view class="mask-content">view>    
  view>
view>
復(fù)制代碼

index.js

Page({
  data: {
    txtRealContent: '',
    txtContent: '',
    showMask: false,
    txtHeight: 0
  },
  textAreaLineChange(e) {
    this.setData({ txtHeight: e.detail.height })
  },
  txtInput(e) {
    this.setData({ txtContent: e.detail.value })
  },
  changeMaskVisible(e) {
    if (!this.data.showMask) {
      // 將換行符轉(zhuǎn)換為wxml可識(shí)別的換行元素 

      const txtRealContent = this.data.txtContent.replace(/\n/g, '
')
      this.setData({ txtRealContent })
    }
    this.setData({ showMask: !this.data.showMask })
  }
})
復(fù)制代碼

index.wxss

.rich-text {
  overflow: hidden;
}
.mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .6);
  z-index: 10;
}
.mask-content {
  position: fixed;
  top: 44%;
  left: 50%;
  height: 60%;
  width: 60%;
  transform: translate(-50%, -50%);
  background-color: yellowgreen;
  z-index: 12;
}