Character limit using HTML, CSS and JavaScript
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: https://twitter.com/RybaLeanne 🤺 Join the Scrimba Weekly Web Dev Challenge: https://scrimba.com/learn/weeklychallenge
Download
0 formatsNo download links available.