Character limit using HTML, CSS and JavaScript

Veröffentlicht am: 02 Oktober 2021
auf dem Kanal: Leanne R

4,578

In this video, I show you how to set a character limit on an HTML input, and display error indications if the user attempts to exceed the limit.

✨ Contents: ✨

00:17 - Adding the HTML.
01:13 - Hiding the error message with the hidden attribute.
01:33 - Grabbing our input and error message paragraph with getElementById.
01:53 - Adding an input event listener to our input.
02:19 - Writing the function to check our code length.
02:50 - Using a conditional to show the error indications if the code is too long.
03:14 - The error CSS class.
03:32 - Removing the error indications if the user deletes characters.
04:03 - Ensuring that elements don’t jump when the error warning is rendered.
04:17 - Adding the maxlength attribute to our input.
04:48 - Making our maxLength variable dynamic.
05:23 - Updating our error warning with our dynamic maxLength variable.
05:48 - Showing the error message at the correct number of keystrokes.

--

const me = {
name: "Leanne 👩🏻",
passions: ["coffee☕️", "code 💻", "cats 🐱"],
unpopular_opinion: "LOVES CSS ❤️",
favorite_colors: ["hotpink", "orangered"],
channel_aim: "Show the world that CSS is fun and web development rules! 👑"
}

--

🐤 Say hi on Twitter: / rybaleanne
🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychall...

Auf dieser Seite können Sie das Online-Video Character limit using HTML, CSS and JavaScript mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Leanne R 02 Oktober 2021 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 4,578 Mal angesehen und es wurde von 65 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

10,660

268