HTML
<span:style="{display:displayTitle}" @dblclick="showInput()">{{node.title}}</span>
<input:style="{display:displayTitleInput}" type="text"@blur="hideInput1"@keydown="hideInput2":value="node.title">
JS
data(){
US>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()
}
},
By double-clicking on the text, we have created a mechanism to change the text to an input tag and make it editable.
(I can't see it because I've omitted a lot of code, but when I change the contents of input, the action of the store is ignited and the corresponding character of state is changed.)
Therefore, I would like to automatically focus on the input tag displayed when I double-click the text.
What should I do?
--- Multi-Post Reporting ---
I heard that stack overflow is not prohibited from multiposting, so I heard it from the English version of stack overflow.
Thank you for your cooperation.
https://stackoverflow.com/questions/52088691/vue-js-put-focus-on-input
https://stackoverflow.com/a/52089309/4506703
You told me here.
this.$nextTick()=>{
This.$refs["input_"+id][0].focus()
})
It didn't seem to work unless the nextTick was an Arrow function...
© 2024 OneMinuteCode. All rights reserved.