小程序中,弹层点击导致底部textarea获取焦点问题

198 阅读1分钟

背景:点击textarea上层元素,textarea也会获取焦点 解决方案: 为了阻止textarea在不必要的时候取得焦点,可将其disabled属性设置为true,在需要的时候再设置为false。

// wxml
<textarea
    placeholder="请输入"
    value="{{a}}"
    bindinput="textareaEdit"
    disabled="{{disabled}}"
    focus="{{focus}}"
    catchtap="textareaTap"
    bindblur="textareaBlur"
 />
 
 // js
 data: {
    disabled: true, // 默认不可用
    focus: false,
  },
 // textarea点击
 textareaTap() {
    this.setData({ // 注意先可用,才能点击一次时获取焦点
      disabled: false,
    })
    this.setData({
      focus: true,
    })
  },
  
  // textarea失去焦点
  textareaBlur() { 
    this.setData({
      disabled: true, // 失去焦点时,置为不可用
      focus: false,
    })
  }