tab键切换使<span>标签变成<input>?

  • Z时代
  • 2024-03-06
  • 分类：IT

画面初始化时，为了提升性能，把本来是<input>标签的输入项改成<span>了。
这样就导致一个问题，tab键切换之后，焦点没有落到相邻的输入框里。能不能实现一个效果，按下tab键的时候，使相邻的<span>变成<input>并且焦点落在这个输入框里。技术上能够实现吗？

<input
      v-if="inputStatus"
      :id="'myInput' + Id"
      type="text"
      v-model.number="currentValue"
      @blur="onMyBlur($event)"
      @focus="onFocus"
      @keypress="onKeyPress"
      @keydown="onKeyDown"
      @mousewheel="onMousewheel"
    />
<span v-else  @click="handleSwitchShowStatus(showId)">{{ currentValue }}</span>
handleSwitchShowStatus(showId) {
      this.inputStatus = true;
    }

回答：

你可以通过监听一下键盘事件去进行处理

回答：

handleSwitchShowStatus (showId) {
    this.inputStatus = true;
    document.querySelector(input的Id).focus()
}

或者这样:使用v-focus修饰符
tab键切换使<span>标签变成<input>?

<input
      v-if="inputStatus"
      :id="'myInput' + Id"
      type="text"
      v-model.number="currentValue"
      @blur="onMyBlur($event)"
      @focus="onFocus"
      @keypress="onKeyPress"
      @keydown="onKeyDown"
      @mousewheel="onMousewheel"
        v-focus
    />
<span v-else  @click="handleSwitchShowStatus(showId)">{{ currentValue }}</span>
本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

以上是 tab键切换使&lt;span&gt;标签变成&lt;input&gt;? 的全部内容， 来源链接： utcz.com/p/933921.html

回到顶部