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

387 阅读1分钟

这个好像还能一定程度解决input点击时的闪烁问题。

先上图。

inputfoucs.webp

思路是这么个思路。
通过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,
    });
  },