Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to solve the problem after clicking on the input box in vue. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Do not focus on the problem after clicking on the input box

Don't talk much nonsense and go straight to the code.

Where you want to write the input box, just put this part of the code in the bi-directional binding values and events with your own defined values and events.

Write these in the method.

InputPaentClick (refName) {undefined / / solve input box double click to focus on the problem this.$nextTick (() = > {undefined this.$refs [refName] & & this.$ refs [refName] .focus ();});}

Just copy these events bound in input and the methods to be implemented are written at the same level of the event

Vue input focus pit click button to focus an input box

1. Add a ref attribute to input, write a button button and add a click event

2. OnFocus method:

OnFocus () {this.$refs.input.focus ()} automatically focuses on mounted () {this.$nextTick (()) = > {this.$refs.input.focus ()}) when loading the page, [pit]

If the input box is hidden, click on an element to make the input box display and focus at the same time, and the focus effect will not be achieved.

Solution:

Click on the element with a variable as the identification, and then watch to listen to the variable, by judging the value of the variable to focus

You can write it in setTimeout or nextTick to solve the problem; the code is as follows

Watch: {isClick () {if (this.isClick = = false) {setTimeout (() = > {this.$refs.input.focus ()}, 100); / / this.$nextTick (() = > {/ / this.$refs.input.focus () / /}) } the above is all the contents of this article entitled "how to solve the problem of not focusing on the input box after clicking on the vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.