<!DOCTYPE html> <!-- Created By CodingNepal - www.codingnepalweb.com --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Limit Input Characters | CodingNepal</title> <link rel="stylesheet" href="style.css"> <!-- Iconsout Link for Icons --> <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/solid.css"> </head> <body> <div class="wrapper"> <form action="#"> <input type="text" spellcheck="false" placeholder="username" maxlength="19" required> <i class="uis uis-at"></i> <span class="counter">19</span> </form> </div> <script> const input = document.querySelector("form input"), counter = document.querySelector("form .counter"), maxLength = input.getAttribute("maxlength"); input.onkeyup = ()=>{ counter.innerText = maxLength - input.value.length; } </script> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter