javascript vue.js 专注于输入

vue.js put focus on input

提问by Kuru

HTML

HTML

<span :style="{ display : displayTitle }" @dblclick="showInput()">
  {{ node.title }}
</span>
<input :style="{ display : displayTitleInput }" type="text" 
       @blur="hideInput1" @keydown="hideInput2" 
       @input="changeTitle(node.id , $event.target.value)" 
       :value="node.title">

JS

JS

data() {
  return {
      displayTitle: "inline-block",
      displayTitleInput: "none"
    };
},
showInput() {
    this.displayTitle = "none"
    this.displayTitleInput = "inline-block"
},
hideInput1() {
   this.displayTitle = "inline-block"
   this.displayTitleInput = "none"
},
hideInput2(event) {
    if (event.keyCode === 13) {
        this.hideInput1()
    }
},

I am a beginner Japanese web developer. I am not good at English, sorry.

我是一名初级日本网络开发人员。我英语不好，抱歉。

HTML is in "v-for" (v-for="node in list").

HTML 位于“v-for” ( v-for="node in list") 中。

When double click text, it turns to <input>.

当双击文本时，它变成<input>。

I want to make it possible to focus on input when it appears.

我想让它出现时可以专注于输入。

I tried this but it didn't work.

我试过这个，但没有用。

HTML

HTML

<span :style="{ display : displayTitle }" @dblclick="showInput(node.id)">
  {{ node.title }}
</span>
<input :ref='"input_" + node.id' :style="{display:displayTitleInput}" type="text" 
       @blur="hideInput1" @keydown="hideInput2" 
       @input="changeTitle(node.id , $event.target.value)" 
       :value="node.title">

JS

JS

showInput(id) {
    this.displayTitle = "none"
    this.displayTitleInput = "inline-block"

    this.$nextTick(this.$refs["input_" + id][0].focus())
},

There was no error on console, but didn't work.

控制台上没有错误，但没有工作。

回答by Phil

Your primary problem is that $nextTicktakes a callback function but you are executing

您的主要问题是$nextTick需要回调函数但您正在执行

this.$refs["input_" + id][0].focus()

immediately. You could get your code working correctly with

立即地。你可以让你的代码正常工作

this.$nextTick(() => {
  this.$refs["input_" + id][0].focus()
})

However, I think you'll run in to further problems and your code can be made much simpler.

但是，我认为您会遇到更多问题，并且您的代码可以变得更简单。

One problem you'll find is that all your node inputs will become visible when double-clicking on any of them due to your style rules.

您会发现的一个问题是，由于您的样式规则，双击任何节点输入时，所有节点输入都将变得可见。

You could instead store an "editing"flag somewhere either on the nodeor in a separate object.

您可以改为将“编辑”标志存储在node或单独对象中的某处。

Below is an example that simplifies your code by...

下面是一个通过以下方式简化代码的示例：

1. Using the array-like nature of refwhen used within a v-forloop, and
2. Using the entermodifier on your @keydownevent binding

1. 使用在循环中ref使用时的类似数组的性质v-for，以及
2. enter在@keydown事件绑定上使用修饰符

new Vue({
  el: '#app',
  data: {
    list: [
      {id: 1, title: 'Node #1'},
      {id: 2, title: 'Node #2'}
    ],
    editing: {}
  },
  methods: {
    showInput(id, index) {
      this.$set(this.editing, id, true)
      
      this.$nextTick(() => {
        this.$refs.input[index].focus()
      })
    },
    hideInput(id) {
      this.editing[id] = false
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<ul id="app">
  <li v-for="(node, index) in list">
    <span v-show="!editing[node.id]" @dblclick="showInput(node.id, index)">
      {{ node.title }}
    </span>
    <input v-show="editing[node.id]" type="text"
           ref="input" :value="node.title"
           @blur="hideInput(node.id)" @keydown.enter="hideInput(node.id)">
  </li>
</ul>

回答by Ricardo Cardona Ramirez

The autofocusattribute is your friend:

该autofocus属性是您的朋友：

<input type="text" autofocus />

回答by Nimeshka Srimal

The way you use this.$nextTick();is incorrect. You should pass it a callback function.

你使用的方式this.$nextTick();不对。你应该给它传递一个回调函数。

this.$nextTick(function () {
    this.$refs["input_" + id].focus()
})

https://jsfiddle.net/un65e9oc/7/

https://jsfiddle.net/un65e9oc/7/

---

---

I'm not however sure how that array access is working for you, because as I notice, $refsis an object with the keys referring to the ref name.

但是，我不确定该数组访问是如何为您工作的，因为正如我所注意到的，它$refs是一个对象，其键指向 ref 名称。

[Edit: Thanks to @Phil's comment, above is clear.]

[编辑：感谢@Phil 的评论，上面很清楚。]

---

---

The above is the correct solution for your problem. Since you have already got that answer, I'll add something other than that.

以上是您问题的正确解决方案。既然你已经得到了那个答案，我会补充一些其他的东西。

The reason why you see this behavior is that because the reference you hold in $refsdoesn't get updated when you change the visibility of the text box in your showInput()method. So when you call this.$refs["input_" + id].focus();, it's actually trying to set focuson a hidden element (because the current reference is not updated).

您看到此行为的原因是因为$refs当您更改showInput()方法中文本框的可见性时，您保存的引用不会更新。因此，当您调用 时this.$refs["input_" + id].focus();，它实际上是在尝试设置focus隐藏元素（因为当前引用未更新）。

That's why you need to call the $nextTick()to update it. But if you wanted a quick fix to your problem, without calling $nextTick(), you could update it manually like this:

这就是为什么你需要调用$nextTick()来更新它。但是，如果您想快速解决您的问题，而无需调用$nextTick()，您可以像这样手动更新它：

this.displayTitleInput = "inline-block"
this.$refs["input_" + id].style.display = this.displayTitleInput

this.$refs["input_" + id].focus();

This would also work :) Hope it helps!!

这也可以：）希望它有帮助！！

回答by Abdullah Pariyani

It's work for me when we validate the form and want to set dynamically focus on each field

当我们验证表单并希望动态设置每个字段的焦点时，它对我有用

           this.$validator.validateAll("FORM_NAME").then(valid => {

                var errors = this.$validator.errors;

                if (valid) {
                    console.log('All Fields are valid')
                } else {
                    const errorFieldName = this.$validator.errors.items[0].field;
                    console.log(errorFieldName);
                    this.$refs[errorFieldName].focus();
                }

            });

回答by rits

if you want to set focus after click on something and show input text box with set focus with vue js

如果您想在单击某物后设置焦点并使用 vue js 显示设置焦点的输入文本框

directives: {
  focus: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}

and use custom directive for it. In case you need it should work on click then set with click

并为其使用自定义指令。如果你需要它应该点击工作然后点击设置

directives: {
  click: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}

and use it

并使用它

<input v-focus> or <input v-click>

enter code here