'vue.js put focus on input

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

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").

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

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

I tried this but it didn't work.

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

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.

javascripthtmlvue.jsinputfocus


Solution 1:[1]

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

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

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

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

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

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 $refs doesn'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 focus on a hidden element (because the current reference is not updated).

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:

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

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

This would also work :) Hope it helps!!

Solution 2:[2]

The autofocus attribute is your friend:

<input type="text" autofocus />

Solution 3:[3]

if you want to set focus after click on something and show input text box with set focus with 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

Solution 4:[4]

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();
                }

            });

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ricardo Cardona Ramirez
Solution 3 ritesh
Solution 4 Abdullah

Related Questions