小程式 textarea元件層級過高導致文字穿透浮層的一個解決方法

清夜發表於2018-08-08
元件穿透

最近做的一個小程式需求，其中一個頁面使用到了 textarea這個小程式元件，然後點選頁面上的某個元素，會觸發頁面彈起一個彈窗，這時發現 textarea的 placeholder文字或者輸入的文字內容，會直接穿透遮罩層和浮動彈窗，顯示在最上面，開始時我以為是遮罩層和浮動彈窗的層級捨得小了，於是改大，誰知道沒用，改到了 99999也沒用，於是我意識到這應該不是我程式碼的問題，網上一搜，果然有故事。

小程式 textarea元件層級過高導致文字穿透浮層的一個解決方法

解決方案

  • 隱藏 textarea

這是最簡單的解決手段，一般彈窗的時候，都會帶個遮罩層，把遮罩層下面的內容隱藏一部分，使用者基本上不會注意的，然後再去掉彈窗和遮罩層的時候再把 textarea顯示出來。 這種方法簡單有效，大部分情況下都可以這麼解決。

<textarea wx:if="{{ showMask }}"></textarea>
複製程式碼
  • 使用替代元素

有時候， textarea穿透的不是遮罩層，或者遮罩層以一種半透明而非完全遮住頁面內容的形式呈現，擔心使用者能夠看到因為 textarea的消失而導致頁面跳動，產生不好的使用者體驗，那麼就可以使用替代元素來替代 textarea而非將之直接隱藏掉。

基本的 textarea元件只接受文字的輸入，拋開可輸入性的話，外觀上看就是一個含有文字節點的簡單元素，只需要獲取當前狀態下的 textarea中輸入的文字，將之賦予給一個樣式與 textarea相同的普通元素，就達到了臨時替代的效果。

<!-- 這是真正的 textarea元件 -->
<textarea id="text-area" value="{{txtRealContent}}" bindinput='txtInput' wx:if="{{!showMask}}" />
<!-- 這是用於模擬 textarea的替代元素 -->
<view class='rich-text' style="{{('height:' + txtHeight + 'px')}}" wx:else>
  <rich-text nodes="{{txtRealContent}}"></rich-text>
</view>
複製程式碼

如上所示

  • 由於需要實時獲取 textarea中已經輸入的內容，所以給 textarea元素加了個 bindinput的監聽器
  • showMask用於標識是否顯示遮罩層(或者其他可能會被 textarea穿透的浮動元素)，如果顯示遮罩層，則隱藏 textarea元素，並顯示替代原宿
  • 這裡 textarea的隱藏使用了 wx:if，會使其徹底地從頁面中消失，而重新顯示出來的時候，textarea元素會重新建立，丟失原先輸入，所以給其加了個 value屬性，其值 txtRealContent就是快取的 textarea已經輸入的文字內容；如果你不用這種方法，不讓 textarea完全顯示，而僅僅是隱藏，例如使用 hidden="{{ showMask ? true :false }}"，因為不涉及到 textarea的刪除與重建，所以就無需新增 value屬性來控制文字內容了。
  • textarea是可以輸入可換行的文字內容的，所以這裡使用了 rich-text元件，在使用的時候，我發現 rich-text好像不支援溢位隱藏，所以又額外在其外面包了一層 view元件，並將其高度設定為和 textarea相同

上面四個步驟，都比較簡單，稍微需要注意的是，如果 textarea的內容包含了換行文字，則需要對換行符進行處理：

textareaContent.replace(/\n/g, '<br/>')
複製程式碼

如果你想讓 textarea自動增加高度而不是固定高度，給 textarea加了個 auto-height，那麼就需要“實時”獲取其高度 說是 “實時”，其實也並不是那麼實時，不考慮其他樣式的變化， textarea的高度與行數有關，每增減一行，其高度才會變化，所以只需要監控其內容行數的變化即可，恰好 textarea元件也已經提供了這個監控器：bindlinechange。

小程式 textarea元件層級過高導致文字穿透浮層的一個解決方法

原理說完了，完整例項程式碼如下：

index.wxml

<view class="page-body">
  <button bindtap="changeMaskVisible">切換mask</button>
  <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>Footer</button>
  <view wx:if="{{showMask}}" bindtap="changeMaskVisible" class="mask">
    <view class="mask-content"></view>    
  </view>
</view>
複製程式碼

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) {
      // 將換行符轉換為wxml可識別的換行元素 <br/>
      const txtRealContent = this.data.txtContent.replace(/\n/g, '<br/>')
      this.setData({ txtRealContent })
    }
    this.setData({ showMask: !this.data.showMask })
  }
})
複製程式碼

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;
}
複製程式碼

相關文章