☰

Userstyles World EDIT - Textarea Counter Limit

Adds a character counter to the input field of Userstyle Name (limit of 50 characters) and Userstyle Short description (limit of 160 characters).

当前为 2025-02-28 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name              Userstyles World EDIT - Textarea Counter Limit
  3. // @description       Adds a character counter to the input field of Userstyle Name (limit of 50 characters) and Userstyle Short description (limit of 160 characters).
  4. // @icon              https://external-content.duckduckgo.com/ip3/userstyles.world.ico
  5. // @version           1.0.5
  6. // @author            decembre
  7. // @namespace         https://greasyfork.org/fr/users/8-decembre
  8. // @match             https://userstyles.world/edit/*
  9. // @grant             GM_addStyle
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Add styles for counters
  16.     GM_addStyle(`
  17.         .test-class {
  18.             font-size: 12px;
  19.             color: silver;
  20.         }
  21.         .charCounter.Title {
  22.             color: gold;
  23.             background: green;
  24.         }
  25.         .charCounter.Title, .charCounter.ShortDescription {
  26.             font-size: 12px;
  27.         }
  28.         .charCounter.Title.normal, .charCounter.ShortDescription.normal {
  29.             border-radius: 5px;
  30.             color: gold;
  31.             background: green;
  32.         }
  33.         .charCounter.Title.too-large, .charCounter.ShortDescription.too-large {
  34.             border-radius: 5px;
  35.             color: glod;
  36.             background: red;
  37.         }
  38.         input#name.normal {
  39.             border: none;
  40.         }
  41.         input#name.too-large {
  42.             border: 1px solid red;
  43.         }
  44.         textarea#description.shortTextarea.normal {
  45.             border: none;
  46.         }
  47.         textarea#description.shortTextarea.too-large {
  48.             border: 1px solid red;
  49.         }
  50.     `);
  51.  
  52.     // Title counter
  53.     var titleCounterContainer = document.createElement('div');
  54.     titleCounterContainer.className = 'test-class';
  55.     var titleText = document.createTextNode('Your Title must be less to 50 characters: ');
  56.     titleCounterContainer.appendChild(titleText);
  57.     var titleCounter = document.createElement('span');
  58.     titleCounter.className = 'charCounter Title normal';
  59.     titleCounterContainer.appendChild(titleCounter);
  60.  
  61.     var titleLabel = document.querySelector('label[for="name"]');
  62.     titleLabel.parentNode.insertBefore(titleCounterContainer, titleLabel.nextSibling);
  63.  
  64.     var titleInputField = document.querySelector('input#name');
  65.     titleInputField.className = 'normal';
  66.     updateTitleCounter();
  67.     titleInputField.addEventListener('input', updateTitleCounter);
  68.  
  69.     function updateTitleCounter() {
  70.         var textLength = titleInputField.value.length;
  71.         titleCounter.textContent = textLength + '/50';
  72.         if (textLength > 50) {
  73.             titleCounter.className = 'charCounter Title too-large';
  74.             titleInputField.className = 'too-large';
  75.         } else {
  76.             titleCounter.className = 'charCounter Title normal';
  77.             titleInputField.className = 'normal';
  78.         }
  79.     }
  80.  
  81.     // Short description counter
  82.     var shortDescriptionCounterContainer = document.createElement('div');
  83.     shortDescriptionCounterContainer.className = 'test-class';
  84.     var shortDescriptionText = document.createTextNode('Your Short description must be less to 160 characters: ');
  85.     shortDescriptionCounterContainer.appendChild(shortDescriptionText);
  86.     var shortDescriptionCounter = document.createElement('span');
  87.     shortDescriptionCounter.className = 'charCounter ShortDescription normal';
  88.     shortDescriptionCounterContainer.appendChild(shortDescriptionCounter);
  89.  
  90.     var shortDescriptionLabel = document.querySelector('label[for="description"]');
  91.     shortDescriptionLabel.parentNode.insertBefore(shortDescriptionCounterContainer, shortDescriptionLabel.nextSibling);
  92.  
  93.     var shortDescriptionInputField = document.querySelector('textarea#description.shortTextarea');
  94.     shortDescriptionInputField.className = 'normal';
  95.     updateShortDescriptionCounter();
  96.     shortDescriptionInputField.addEventListener('input', updateShortDescriptionCounter);
  97.  
  98.     function updateShortDescriptionCounter() {
  99.         var textLength = shortDescriptionInputField.value.length;
  100.         shortDescriptionCounter.textContent = textLength + '/160';
  101.         if (textLength > 300) {
  102.             shortDescriptionCounter.className = 'charCounter ShortDescription too-large';
  103.             shortDescriptionInputField.className = 'too-large';
  104.         } else {
  105.             shortDescriptionCounter.className = 'charCounter ShortDescription normal';
  106.             shortDescriptionInputField.className = 'normal';
  107.         }
  108.     }
  109. })();