微信小程序 解决textarea层级太高导致点击其上方的view它也会获得焦点问题

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m940034240/article/details/82908441

为了阻止textarea在不必要的时候取得焦点，可将其disabled属性设置为true，在需要的时候再设置为false。下面给出控制disabled和focus的值的方法

wxml：

<view>
    <!--.....具体页面就不贴出来了，在textarea上方会有其他view，目的是实现点击这个view不会使textarea获得焦点-->
    <textarea class='msg' id='message' bindinput='bindinput' disabled='{{disabled}}'
         focus='{{focus}}' catchtap='a' bindblur='b'>
    </textarea>
    <!--..... -->
</view>

js：

Page({
  /**
   * 页面的初始数据
   */
  data: {
    disabled: true,//默认不可用
    focus: false//默认没获取焦点
  },
  bindinput: function (e) {
    var a = e.target.id;
    var value = e.detail.value
    this.setData({
      [a]: value
    })
    return {
      value: value,
      cursor: value.length
    }
  },
  a: function (e) {
    //这里是关键，先设置disabled，再设置focus才能成功实现点击一次获得焦点
    this.setData({
      disabled: false,
    })
    this.setData({
      focus: true
    })
  },
  b: function (e) {
    //失去焦点，将textarea的disabled设置为true
    this.setData({
      disabled: true,
      focus: false
    })
  }
})