https://catalog.charlestonforge.com/assets/controllers/remainingch…756aa1bad43162cf5d9b237626788890f7b3152a.js

1import { Controller } from "@hotwired/stimulus";
2
3/* Display a message showing how many charcters are remaining
4 * for an input field. This class expects that the HTML element
5 * attribute 'maxlength' is set on the input element.
6 */
7export default class extends Controller {
8  static targets = ["input", "output"];
9
10  connect() {
11    this.display();
12  }
13
14  display() {
15    const input = this.inputTarget;
16    const output = this.outputTarget;
17    const maxLength = input.getAttribute("maxlength");
18    let newLinesLength = 0;
19
20    const visibleCharLength = input.value.length;
21    const newLines = input.value.match(/(\r\n|\n|\r)/g);
22    const messageRemaining = " characters remaining.";
23    const messageTooMany = " characters too many.";
24
25    if (newLines != null) {
26      newLinesLength = newLines.length;
27    }
28
29    const finalLength = maxLength - visibleCharLength - newLinesLength;
30
31    if (finalLength >= 0) {
32      output.innerHTML = finalLength + messageRemaining;
33    } else {
34      output.innerHTML = Math.abs(finalLength) + messageTooMany;
35    }
36  }
37}
38;