0

Не очень хорошо владею JavaScript, поэтому хотел попросить помощи у более опытных коллег.

Значит есть скрипт (код конечно будет ниже), который в режиме реального времени считает количество символов введенных в поле textarea. Исходя из введенных символов мы получаем в html шаблон следующую информацию:

  1. Собственно количество введенных символов пользователем к данному моменту
  2. Сообщение в зависимости от их количества (введено мало, сколько нужно или много)

В поле textarea в котором идет подсчет при загрузке страницы выводится значение из базы т.е. оно уже не пустое. Однако мой скрипт запускается только кода пользователь введет что-то в textarea или удалит (если быть совсем точным запускается по эвенту onkeyup т.е. по отжатию клавиши).

Задача собственно вот в чем. Поскольку при загрузке страницы в поле textarea мы автоматом загружаем данные из базы т.е. поле не пустое, то необходимо, чтобы скрипт запускал подсчет сразу при загрузке страницы и сразу выдавал значения. При этом, необходимо сохранить функционал подсчета символов в реальном времени, если пользователь вводит или удаляет данные в той самой textarea

Понимаю, что в моем коде не предусмотрено, чтобы скрипт срабатывал при загрузке страницы. Но

  • я пробовали менять эвент на onload, результата нет.
  • пробовал добавлять window.onload = countDescriptionChar(this)
  • пробовал через document.addEventListener("DOMContentLoaded", function() { countDescriptionChar(this); });

К сожалению, все безрезультатно, не работает.

Уточню, что на странице есть ещё одна аналогичная textarea в которой работает аналогичный скрипт и которому так же бы желательно запускаться при загрузке. Я к тому, что насколько понял, такие вещи как window.onload = countDescriptionChar(this) при запуске одного не дают запуститься второму.

Буду безмерно благодарен за любую помощь.

Это мой JavaScript код

        function countDescriptionChar(val) {
            var len = val.value.length;
            if ((len >= 0) && (len < 105)) {
                $('#symbolsDescription').text(len);
                document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>less then 105 characters</span>";
            }
            else if ((len >= 105) && (len <= 135)) {
                $('#symbolsDescription').text(len);
                document.getElementById("statusDescription").innerHTML = "<span style='color: green'>Idealy! (105 - 135 characters)</span>";
            }
            else {
                $('#symbolsDescription').text(len);
                document.getElementById("statusDescription").innerHTML = "<span style='color: orangered'>Too much... (more then 135)</span>";
            }
        };

Это HTML код который я использую в шаблоне Уточню, что использую при разработке сайта Laravel, через неё в поле textarea выводится значение из базы, если таковое существует.

<label for="" class="mt-4">Description</label>
<div id="statusDescription"></div>
Symbols: <div class="seocount" id="symbolsDescription"></div>

<textarea class="form-control" id="meta_description" name="meta_description" onkeyup="countDescriptionChar(this)" >
@isset ($article->meta_description)
{{ $article->meta_description}}
@endisset
</textarea>

1 ответ 1

0

вы используете верное событие, но при старте скрипта следует вызывать другой метод:

document.addEventListener("DOMContentLoaded", function() {
 // получаем начальное значение value
 const val = meta_description.defaultValue
 // и отправляем его в вашу функцию
 countDescriptionChar(val); 
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.