Voided.to Logo Voided.to Vto.

Register

Prevent Message Truncation: Shoutbox Character Counting Extension [TamperMonkey]

Pong
Lounge
2
174

Thread

#1
Pong usericon
Avatar: Pong
Cosmo
Cosmo
35
Rep
28
Likes
Posts 33
Threads 12
Joined Feb 2025
Points 3,097
ShoutBox TamperMonkey Extension

This Tampermonkey script enhances the Voided.to shoutbox by integrating a character counter with customizable limits and visual cues.
It aims to prevent messages from being truncated due to exceeding the character limit, ensuring a smoother user experience until an official solution is implemented.

 Features:
 
  • Real-time Character Count: Displays the current character count as you type.
  • Customizable Character Limit: Allows users to set their preferred character limit via the settings modal.
  • Visual Feedback: Provides visual cues when approaching or exceeding the character limit, helping users manage their message length effectively.
  • Automatic Truncation: Prevents further input once the character limit is reached, ensuring messages are not inadvertently cut off.

 Installation Instructions:
 
  1. Install Tampermonkey: Ensure you have the Tampermonkey extension installed in your browser.
  2. Create a New Script: Open Tampermonkey and create a new script.
  3. Paste the Code: Copy and paste the provided script into the Tampermonkey editor.
  4. Save and Activate: Save the script, and it will automatically run on the Voided.to website.


Source Code:
Code:
// ==UserScript==
// @name         Voided.to Shoutbox Character Counter
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds a character counter to the shoutbox with customizable character limit and visual cues.
// @author       Pong
// @match        https://voided.to/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const defaultLimit = 120;

    function addCharacterCounter() {
        const inputField = document.getElementById('dvz_input');
        if (!inputField) return;

        const counterContainer = document.createElement('div');
        counterContainer.style.marginTop = '5px';
        counterContainer.style.textAlign = 'right';
        counterContainer.id = 'characterCounter';

        const charCounter = document.createElement('span');
        charCounter.id = 'charCount';
        charCounter.style.color = 'gray';
        charCounter.textContent = `0 / ${defaultLimit}`;

        counterContainer.appendChild(charCounter);
        inputField.parentNode.insertBefore(counterContainer, inputField.nextSibling);

        inputField.addEventListener('input', updateCharacterCount);
    }

    function updateCharacterCount() {
        const inputField = document.getElementById('dvz_input');
        const charCounter = document.getElementById('charCount');
        const currentLength = inputField.value.length;
        const limit = parseInt(localStorage.getItem('charLimit')) || defaultLimit;

        charCounter.textContent = `${currentLength} / ${limit}`;

        if (currentLength >= limit * 0.9) {
            charCounter.style.color = 'orange';
        }
        if (currentLength >= limit) {
            charCounter.style.color = 'red';
            inputField.style.borderColor = 'red';
            inputField.value = inputField.value.substring(0, limit);
        } else {
            inputField.style.borderColor = '';
        }
    }

    function addCharacterLimitSettings() {
        const settingsModal = document.getElementById('shoutSettings');
        if (!settingsModal) return;

        const settingBox = document.createElement('div');
        settingBox.className = 'setting-box';

        const label = document.createElement('label');
        label.textContent = 'Character Limit';

        const input = document.createElement('input');
        input.type = 'number';
        input.id = 'charLimitInput';
        input.min = '1';
        input.value = localStorage.getItem('charLimit') || defaultLimit;

        settingBox.appendChild(label);
        settingBox.appendChild(input);

        settingsModal.querySelector('.modal-content').appendChild(settingBox);

        document.getElementById('saveSettings').addEventListener('click', saveCharacterLimit);
    }

    function saveCharacterLimit() {
        const limitInput = document.getElementById('charLimitInput');
        const newLimit = parseInt(limitInput.value);
        if (!isNaN(newLimit) && newLimit > 0) {
            localStorage.setItem('charLimit', newLimit);
            updateCharacterCount();
        }
    }

    window.addEventListener('load', () => {
        addCharacterCounter();
        addCharacterLimitSettings();
    });

    document.getElementById('saveSettings')?.addEventListener('click', updateCharacterCount);
})();
[Image: rrKEfOM.gif]
Reply
Task