Element reference bindings (bind:this) in Svelte - Mini Project: Build & Apply

Element reference bindings (bind:this) in Svelte

📖 Scenario: You are building a simple Svelte app where you want to control a text input field directly from your script. This is useful when you want to focus the input or read its value without using two-way binding.

🎯 Goal: Create a Svelte component that uses bind:this to get a reference to a text input element. Then use that reference to focus the input when a button is clicked.

📋 What You'll Learn

Create a variable to hold the input element reference

Bind the input element to that variable using bind:this

Add a button that, when clicked, focuses the input element using the reference

💡 Why This Matters

🌍 Real World

Element references let you control DOM elements directly, useful for focusing inputs, measuring sizes, or integrating with third-party libraries.

💼 Career

Knowing how to use element references is important for building interactive web apps with Svelte, improving user experience and accessibility.

1

Create an input element and a reference variable

Create a variable called inputRef initialized to null. Then add an <input> element with type="text" in the markup.

Svelte

let inputRef = null;

Need a hint?

Use let inputRef = null; to declare the variable. Add an <input type="text"> element below.

2

Bind the input element to the reference variable

Add bind:this={inputRef} to the <input> element to bind it to the inputRef variable.

Svelte

let inputRef = null;

Need a hint?

Use bind:this={inputRef} inside the <input> tag to connect the element to the variable.

3

Add a button to focus the input element

Add a <button> element with the text Focus Input. Add a click event handler that calls a function named focusInput.

Svelte

let inputRef = null;



Focus Input

Need a hint?

Add a button with on:click={focusInput} to call the function when clicked.

4

Define the focusInput function to focus the input

Write a function called focusInput that calls inputRef.focus() to set focus on the input element.

Svelte

let inputRef = null;



Focus Input

function focusInput() {
    // Your code here
}

Need a hint?

Define function focusInput() { inputRef.focus(); } to focus the input when the button is clicked.