Ajoutez une instruction else en bas et redéfinissez la couleur sur le noir comme ceci:

var evnt = document.createEvent('HTMLEvents');
evnt.initEvent('keyup', true, true); // Deprecated but still works
$('textarea.minchar').dispatchEvent(evnt);

Déclenchement manuel de l'événement la première fois:

if (maxLength - Number(value.length) <= 0) {
  rechar.style.color = "#E01424";
} else if (maxLength - Number(value.length) <= 100) {
  rechar.style.color = "#CF7721";
} else { // You can add an if statement here to check if the color is #000 yet to prevent re-renders
  rechar.style.color = "#000";
}

J'ai analysé le contenu de votre question et y ai trouvé plus d'un problème, les résoudre vous donnera une perspective ouverte de ce qui se passe. Laissez-moi vous expliquer.

Définissez d'abord ce que vous utiliserez dans votre code.

Cela vous aidera à mieux comprendre votre code, en définissant d'abord les variables utiles. Vous n'avez donc pas besoin de les appeler encore et encore. Donc, je vous suggère de définir vos références d'éléments DOM au tout début comme ceci:

<div class="col-md-10 pl-0">
  <textarea cols="15" rows="4" placeholder="Describe this Extra in brief for your guest" class="minchar" maxlength="250">Save time and return the vehicle at any fuel level. The price includes up to a full tank of petrol/diesel/charge.</textarea>
  <p class="rechar" id="test">250 characters remaining</p>
</div>

Nous avons maintenant le textarea dans une variable, le div de sortie dans un autre et la longueur maximale que nous devrions utiliser.

Gérez vos caractères restants dans une fonction.

Pourquoi vous demandez-vous cela? Eh bien, voyez par vous-même à quel point le code change de manière plus propre, lisible et plus simple. Ainsi, avoir une fonction simple dont la seule tâche est de mettre à jour la sortie des caractères restants , vous permettra d'exécuter la fonction chaque fois que vous souhaitez la mettre à jour. Cela peut être lorsqu'une touche est enfoncée, lorsque la zone de texte change, ou même lorsque le site Web est chargé :

La fonction:

var textarea = document.querySelector(".minchar"),
    output = document.querySelector(".rechar");
var maxLength = +textarea.getAttribute("maxlength");

function outputRemainingCharacters(){
    let used = textarea.value.length;
    output.innerText = `${maxLength - +used} characters remaining`;
}

textarea.addEventListener('keydown', function(event) {

    outputRemainingCharacters();
    let used = textarea.value.length;
    if (maxLength - used == 0) {
        output.style.color = "#E01424";
    } else if (maxLength - used <= 100) {
        output.style.color = "#CF7721";
    } else {
        output.style.color = "#000"; //Default color
    }

});

window.onload = outputRemainingCharacters;

Ajout de la fonction à l'écouteur d'événements juste au moment du chargement du site Web:

textarea.addEventListener('keydown', function(event) {

    outputRemainingCharacters();
    let used = textarea.value.length;
    if (maxLength - used == 0) {
        output.style.color = "#E01424";
    } else if (maxLength - used <= 100) {
        output.style.color = "#CF7721";
    } else {
        output.style.color = "#000"; //Default color
    }

});

Aussi simple comme cela, il mettra à jour votre valeur depuis le tout début.

Ajoutez une condition par défaut à votre instruction if.

Cela est dû à, si vous n'ajoutez pas de valeur par défaut valeur, vous ne pourrez jamais revenir à la valeur par défaut comme vous le mentionnez:

window.onload = outputRemainingCharacters;

Comme vous pouvez le voir, l'écouteur d'événements est maintenant un beaucoup plus propre. Je recommanderais également:

Utilisez des écouteurs d'événements pour l'événement spécifique sur l'élément spécifique dont vous avez besoin.

Cela vous aidera à ne pas ajouter d'instructions if supplémentaires pour correspondre si l'événement s'est déclenché sur l'élément que vous voulez. Puisque nous avons défini la zone de texte au tout début, nous pouvons maintenant simplement lui attribuer directement l'écouteur d'événement.

Remarque: Vous devez utiliser le écouteur d'événements keydown au lieu de keyup . Cela est dû au fait que maintenir une touche enfoncée ne déclenchera pas l'événement tant que la touche ne sera pas levée. keydown sera plus précis ici. Essayez de maintenir la touche d'espace enfoncée tout en écrivant dans la zone de texte de l'extrait de code suivant et voyez ce qui se passe.

Vérifiez cet exemple:

function outputRemainingCharacters(){
    let used = textarea.value.length;
    output.innerText = `${maxLength - +used} characters remaining`;
}

var textarea = document.querySelector(".minchar"),
    output = document.querySelector(".rechar");
var maxLength = +textarea.getAttribute("maxlength");

Si vous souhaitez le faire en utilisant jQuery, ci-dessous devrait faire de même.

Extrait HTML:

$('.minchar').on('input', function(e){
    e.stopPropagation();
  // Get Length
  var txtLength = $(e.currentTarget).val().length;
  // Get Remaining Length
  var txtLengthRemaining = 250 - txtLength;
  // Create HTML String
  var strHtml = txtLengthRemaining+" characters remaining";
  // Fill the String & Color based on below conditions
  if(txtLengthRemaining <= 0) {
    $('.rechar').css('color', '#E01424').html(strHtml);
  } else if(txtLengthRemaining <= 100) {
    $('.rechar').css('color', '#CF7721').html(strHtml);
  } else {
    $('.rechar').css('color', '#737373').html(strHtml);
  }
});  
// Trigger event on page load by default.
$('.minchar').trigger('input');

Extrait jQuery:

    <label class="col-md-12 pl-0">Description</label>
<div class="col-md-10 pl-0">
  <textarea cols="75" rows="5" class="minchar" maxlength="250" placeholder="Describe this Extra in brief for your guest">Save time and return the vehicle at any fuel level. The price includes up to a full tank of petrol/diesel/charge.</textarea>
  <p class="rechar"></p>
  </div>

JSFiddle: http : //jsfiddle.net/nh147uaf/2/