Limite de caractéres dans champs addnew.tpl

Vous avez peut-être besoin de limiter le nombre de caractère que vos utilisateurs peuvent entrer quand ils veulent créer un article. Et il est vrai que certain utilisateurs abusent en caractaires. Voyons ensemble dans cet article comment réaliser ceci de manière simple et efficace.

Description de la fonctionnalité du script
Ce script est conçu pour gérer la saisie de texte dans des champs de formulaire spécifiques, en limitant le nombre de caractères saisis et en affichant les messages d'erreur correspondants. Il comprend les principales fonctionnalités suivantes :

Paramètres des champs:
Chaque champ a ses propres paramètres, y compris le nombre maximal de caractères et le message d'erreur si cette limite est dépassée.

Initialisation des champs: Le script définit automatiquement le nombre maximal de caractères pour chaque champ, ajoute des messages d'erreur et des compteurs de caractères.

Vérification de la saisie: Lors de la saisie de texte dans les champs, le script vérifie la longueur actuelle du texte saisi. Si la longueur atteint le maximum, un message d'erreur s'affiche. Sinon, le message est masqué.

Connexion aux champs:
Pour connecter le script aux champs nécessaires du formulaire, suivez les étapes suivantes :

Assurez-vous d'avoir des champs avec des identifiants uniques correspondant aux clés de l'objet fields (par exemple, title, alt_name, short_story, full_story).

Cette partie est-celle que vous devez règler dans le script plus bas

// Paramètres pour chaque champ par ID :
const fields = {
  title: { max: 140, errorMessage: "Nombre de caractères du titre dépassé (maximum 140)" },
  alt_name: { max: 15, errorMessage: "Nombre de caractères de l'URL dépassé (maximum 15)" },
  short_story: { max: 3000, errorMessage: "Nombre de caractères de l'histoire courte dépassé (maximum 3000)" },
  full_story: { max: 6000, errorMessage: "Nombre de caractères de l'histoire complète dépassé (maximum 6000)" }
};

Dans addnew.tpl cherchez name="alt_name" etajoutez à coté id="alt_name"

Le script est actuellement configuré pour les modèles standards DLE. Si votre modèle n'est pas standard, les identifiants (id="title") ou les classes (class="myclass") peuvent être absents ou avoir d'autres noms.

Placez ce code tout en bas dans le fichier de modèle addnews.tpl après tout le code qu'il contient:

<style>
.error-message {color: red; font-weight: bold; font-size: 0.9em; margin-left: 10px;}
.character-counter {margin-left: 10px;}
</style>
<script>
// Настройки для каждого поля по ID:
const fields = {
  title: { max: 140, errorMessage: "Превышено кол-во символов заголовка (максимум 140)" },
  alt_name: { max: 15, errorMessage: "Превышено кол-во символов URL (максимум 15)" },
  short_story: { max: 3000, errorMessage: "Превышено кол-во символов заголовка (максимум 3000)" },
  full_story: { max: 6000, errorMessage: "Превышено кол-во символов заголовка (максимум 6000)" }
};

function initializeFields() {
  Object.keys(fields).forEach(fieldId => {
    const field = document.getElementById(fieldId);
    const { max, errorMessage } = fields[fieldId];
    field.setAttribute("maxlength", max);
    const errorElement = document.createElement("span");
    errorElement.id = `${fieldId}-error`;
    errorElement.className = "error-message";
    errorElement.style.display = "none";
    errorElement.textContent = errorMessage;
    field.insertAdjacentElement("afterend", errorElement);
    const counterElement = document.createElement("span");
    counterElement.id = `${fieldId}-counter`;
    counterElement.className = "character-counter";
    counterElement.style.display = "block";
    counterElement.textContent = `Caractères: 0 sur ${max}`;
    errorElement.insertAdjacentElement("afterend", counterElement);
    field.addEventListener("input", checkInputLength);
  });
}

function checkInputLength(event) {
  const input = event.target;
  const fieldId = input.id;
  const { max, errorMessage } = fields[fieldId]; 
  const errorElement = document.getElementById(`${fieldId}-error`);
  const counterElement = document.getElementById(`${fieldId}-counter`);
  const currentLength = input.value.length;  
  // Обновляем текст счётчика символов
  counterElement.textContent = `Caractères: ${currentLength} sur ${max}`;  
  if (currentLength === max) {
    errorElement.textContent = errorMessage;
    errorElement.style.display = "inline";
  } else {
    errorElement.style.display = "none";
  }
}
initializeFields();
</script>

• Auteur: Karat7
• Version DLE: 16.0-17.3