微信小程序<input>实现点击选中内部文本及闪烁问题

发布时间 2023-04-25 17:01:44作者: 叶逝秋灬

 

 

思路是这么个思路。
通过ifelse控制input的focus,text触发则显示input同时focus。

  // wxml
  <view wx:for="{{lists}}">
    <input bindblur="fnInputBlur" focus="{{lists[index].focus}}" selection-start="{{lists[index].sel_start}}" selection-end="{{lists[index].sel_end}}" data-idx="{{index}}" value="{{lists[index].number}}" type="number" class="skin" wx:if="{{lists[index].focus}}" />
    <text bindtap="fnInputFocus" data-idx="{{index}}" class="skin" wx:else>{{lists[index].number}}</text>
  </view>
  // js
  fnInputFocus: function (e) {
    var _dataset = e.currentTarget.dataset
    var _idx = _dataset.idx;
    this.setData({
      [`lists[${_idx}].focus`]: !0,
    });
  },
  fnInputBlur: function (e) {
    var _dataset = e.currentTarget.dataset
    var _idx = _dataset.idx;
    this.setData({
      [`lists[${_idx}].focus`]: !1,
    });
  },
 

 

// https://juejin.cn/post/7217994625343832122