Второй вариант “предохранителя” на превышение количества символов с показом счетчика:
<div class="col-12">
<label for="marketMetaTitle" class="form-label fw-semibold">{PHP.L.market_metatitle}</label>
<div class="input-group has-validation">
{MARKETEDIT_FORM_METATITLE|cot_rc_modify($this, 'data-chars-limit="55" id="marketMetaTitle"')}
</div>
<div class="form-text text-end">
<span class="text-muted small" id="marketMetaTitle-counter"></span>
</div>
</div>
<div class="col-12">
<label for="marketMetaDesc" class="form-label fw-semibold">{PHP.L.market_metadesc}</label>
<div class="input-group has-validation">
{MARKETEDIT_FORM_METADESC|cot_rc_modify($this, 'data-chars-limit="160" id="marketMetaDesc"')}
</div>
<div class="form-text text-end">
<span class="text-muted small" id="marketMetaDesc-counter"></span>
</div>
</div>
и также в самый конец добавить скрипт
<script>
document.addEventListener('DOMContentLoaded', function() {
const fields = document.querySelectorAll('input[data-chars-limit], textarea[data-chars-limit]');
fields.forEach(function(field) {
const limit = parseInt(field.getAttribute('data-chars-limit'), 10);
if (!field.id) return; // если поле без id, пропускаем (но теперь id есть)
const counter = document.getElementById(field.id + '-counter');
if (!counter) return;
function updateCounter() {
let value = field.value;
if (value.length > limit) {
field.value = value.substring(0, limit);
}
const remaining = limit - field.value.length;
counter.textContent = '{PHP.L.market_metadesc}: ' + remaining + ' симв.';
}
field.addEventListener('input', updateCounter);
updateCounter();
});
});
</script>