微信小程序-input、textarea層級穿透問題

問題描述:

       發現在真機預覽的時候，會出現穿透bug，input提示信息沒有，而textare提示信息卻顯示出在彈框之上，如下圖所示；

解決思路:

       定義一個變量標記使其在得到焦點focus的時候是文本域，即當用戶點擊文本域輸入（獲得焦點），觸發bindContentBlur方法，點擊文本域其他地方（失去焦點）變成div，可以做到“矇蔽”用戶的眼睛，只要樣式調成跟textare原生樣式一致即可；樣式就不羅列了，沒啥可參考性；

//wxml
<view class='detailBorder'>
      <image class="alart" src="Information_Icon.png"></image>
      <textarea placeholder-style="color:#5F5F5F;"  wx:if="{{isInputContentFocus}}" focus="{{isFocus}}" 
      class="detail" bindblur="bindContentBlur" placeholder='請輸入通知詳情（最多500個字）' name="content">
      </textarea>
      <div class="placeholder" wx:else bindtap="bindContentFocus">{{placeholder}}</div> 
    </view>

//js
Page({
  data: {
    placeholder: '請輸入通知詳情（最多500個字）',
    isInputContentFocus: false,
    isFocus: false，
},
 bindContentFocus(e) {
    this.setData({
      isFocus: true, //觸發焦點
      isInputContentFocus: true//聚焦時隱藏內容文本標籤
    })
  },
  bindContentBlur(e) {
    this.setData({
      isInputContentFocus: false,     //聚焦時隱藏內容文本標籤
      isFocus: false, //失去焦點
      placeholder: e.detail.value
    })
    if (e.detail.value == '') {
      this.setData({
        placeholder: '請輸入通知詳情（最多500個字）'
      })
    }
  },
})

文章參考來源：https://www.cnblogs.com/cyf-1314/p/12388657.html

❤如果文章對您有所幫助，就在文章的右上角或者文章的末尾點個贊吧！(づ￣ 3￣)づ

❤如果喜歡大白兔分享的文章，就給大白兔點個關注吧！(๑′ᴗ‵๑)づ╭❤～

❤對文章有任何問題歡迎小夥伴們下方留言或者入羣探討【羣號：708072830】

❤鑑於個人經驗有限，所有觀點及技術研點，如有異議，請直接回復討論（請勿發表攻擊言論）。