TypeScript and Vue 3

Autofocus Practice

Ben Hong

Ben Hong

TypeScript and Vue 3

Check out a free preview of the full TypeScript and Vue 3 course

The "Autofocus Practice" Lesson is part of the full, TypeScript and Vue 3 course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to autofocus a field on the DishForm on the 08-exercise branch. The solution to the auto focus exercise can be found on the 08-finish branch.


Transcript from the "Autofocus Practice" Lesson

>> So now that we've practiced that, what I want you to do now is go ahead and do the same thing. I want you to autofocus any field you want on the NewDishForm that we have here. So what I'm doing right here is just, I sort of went ahead and did a little bit of a migration over to script setups.

And you'll have seen me do that a few times, so I figured no need to walk you all through that whole thing. So basically we have here the new-dish form, did you all do okay as far as getting everything autofocus the way you want it to? Great, this is good.

So let's run through this then. So once again, just like we talked about, the first thing we wanna do is decide which element will be referenced. So in this case I'll just pick this one, so again, element, I'll call it DishNameInput, just to be a bit more specific.

And then we define our ref, so const elDishNameInput, this is a ref that could be an HTML input element or null. And it will start out as null because when the page loads we don't know what it'll be. Then onMounted when the page has been loaded, we will go ahead and say, hey look, if dishNameInput.value exists with the question mark, then we'll go ahead and focus on it.

So just to make sure that all this works as expected. If we go over here to Dishes now and New, there you go Name automatically shows up.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now