javascript - 可切换的文本/输入字段中的自动聚焦输入框

我正在构建一个“可切换”表单，在该表单中，我希望<p>标记在单击时成为<input>标记。

以下JSFiddle做到了：https://jsfiddle.net/50wL7mdz/314578/

主要内容如下：

<div id="app">
  <div v-for="msg in messages" :key="msg.txt">
    <div :class="{editing: msg.edit}">
      <p v-on:click="msg.edit = !msg.edit">{{msg.txt}}</p>
      <input type="text" v-model="msg.txt">
    </div>
  </div>
</div>

为了获得良好的用户体验，我希望在<input>框未隐藏时将其聚焦，以便用户可以立即开始键入。

我无法预测表单中会有多少个输入字段，这使我的问题有些复杂（正如您从JSFiddle中看到的那样，我已经使用for循环生成了组）。

如何将焦点放在新发布的<input>框上？

最佳答案

https://jsfiddle.net/50wL7mdz/314662/

<div v-for="(msg, index) in messages" :key="msg.txt">
    <div :class="{editing: msg.edit}">
      <p v-on:click="toggle(index, $event)">{{msg.txt}}</p>
      <input type="text" v-model="msg.txt">
    </div>
  </div>

toggle(index, event) {
      this.messages[index].edit = !this.messages[index].edit
            this.$nextTick(function(){
        event.target.parentNode.querySelector('input').focus()
      });
    }

试试这个伴侣-您可以通过在点击绑定中传递$ event来在Vue中公开事件，然后我们只需检查点击的目标，找到同级输入并将其聚焦即可，在Vue完成nextTick之后（当组件已重新渲染（在这种情况下，文本框可见）

请享用！

关于javascript - 可切换的文本/输入字段中的自动聚焦输入框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49885806/