Last active
April 23, 2021 12:38
-
-
Save davidl/b8d4fda8abd91b19edf819ff2ac2e86b to your computer and use it in GitHub Desktop.
Simple HTML document with minimal CSS and JavaScript to count the characters in a textarea with a configurable target length.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| View in browser: https://bl.ocks.org/davidl/raw/b8d4fda8abd91b19edf819ff2ac2e86b/?raw=true |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <title>Character Count</title> | |
| <meta charset="utf-8"> | |
| <style> | |
| html, | |
| body, | |
| textarea, | |
| div { | |
| background: #333; | |
| color: #fff; | |
| font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; | |
| font-size: 1.1rem; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| .notes { | |
| border-bottom: 1px solid #707070; | |
| margin-bottom: 1rem; | |
| padding: 1rem 0.4rem; | |
| } | |
| textarea { | |
| height: 500px; | |
| line-height: 1.3; | |
| padding: 0.4rem; | |
| width: 1060px; | |
| } | |
| textarea::placeholder { | |
| font-style: italic; | |
| } | |
| .max-exceeded { | |
| color: #f00; | |
| } | |
| .wrapper { | |
| display: flex; | |
| justify-content: space-between; | |
| max-width: 1060px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="notes" contenteditable onfocus="requestAnimationFrame(() => selectElementContents(this))">Notes (editable)</div> | |
| <textarea id="text" onkeyup="updateCharCount()" placeholder="Add text to view character count…"></textarea> | |
| <div class="wrapper"> | |
| <div id="charcount"></div> | |
| <label for="max">Character limit: <input type="number" id="max" name="max" min="0" value="1300" onclick="updateCharCount()" oninput="updateCharCount()"></label> | |
| </div> | |
| <script> | |
| function selectElementContents(el) { | |
| const range = document.createRange(); | |
| range.selectNodeContents(el); | |
| const sel = window.getSelection(); | |
| sel.removeAllRanges(); | |
| sel.addRange(range); | |
| } | |
| function updateCharCount() { | |
| const elm = document.getElementById('charcount'); | |
| const lng = document.getElementById('text').value.length; | |
| const max = document.getElementById('max').value; | |
| if (max) { | |
| const diff = Math.abs(max - lng); | |
| const over = lng > max; | |
| elm.innerHTML = `${lng} of ${max} characters <i>(${diff} character${diff !== 1 ? 's' : ''} ${over ? 'over' : 'remaining'})</i>`; | |
| elm.classList.toggle('max-exceeded', over); | |
| } else { | |
| elm.innerHTML = `${lng} characters`; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment