URL скопирован в буфер обмена!
Как ограничить количество символов в поле ввода на Tilda?
С помощью этой модификации можно ограничить количество вводимых символов в полях формы. Скрипт работает со стандартными формами и с формами в Zero Block. Поддерживаются однострочные поля ввода и поле ввода в несколько строк. Дополнительно можно вывести счетчик символов и кнопку очистки.
Модификация работает с включенным Autoscale в блоках
Модификация работает c Zero Block и стандартными блоками
Номер модификации в библиотеке TiCode
Название поля/количество символов
Кнопка очистки
Счетчик символов
Цвет счетчика
Размер счетчика
Настройки счетчика
Цвет крестика
Размер крестика
Настройки кнопки очистки
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD145--><script>
document.addEventListener("DOMContentLoaded", function () {
const TCDformmassive = {comment: 100};
const TCDshowClear = false;
function TCDlimitInput(input, maxLength, TCDcountform) {
input.maxLength = maxLength;
const updateCounter = function () {
if (input.value.length > maxLength) {
input.value = input.value.slice(0, maxLength);
}
TCDcountform.textContent =
input.value.length + " / " + maxLength;
};
input.addEventListener("input", updateCounter);
updateCounter();
}
function TCDCount(input) {
const wrapper = document.createElement("div");
wrapper.className = "tcd-char-counter-wrapper";
wrapper.style.position = "relative";
wrapper.style.display = "block";
wrapper.style.width = "100%";
input.parentNode.insertBefore(wrapper, input);
wrapper.appendChild(input);
input.style.boxSizing = "border-box";
const TCDformcnt = document.createElement("div");
TCDformcnt.className = "tcd-char-counter-controls";
TCDformcnt.style.position = "absolute";
TCDformcnt.style.right = "8px";
TCDformcnt.style.bottom = "6px";
TCDformcnt.style.display = "flex";
TCDformcnt.style.alignItems = "center";
TCDformcnt.style.gap = "5px";
TCDformcnt.style.fontFamily = "sans-serif";
TCDformcnt.style.zIndex = "2";
const TCDcountform = document.createElement("div");
TCDcountform.className = "tcd-char-counter";
TCDcountform.style.fontSize = "12px";
TCDcountform.style.color = "#999";
TCDcountform.style.pointerEvents = "none";
TCDformcnt.appendChild(TCDcountform);
if (TCDshowClear) {
const TCDclearBtn = document.createElement("div");
TCDclearBtn.className = "tcd-char-counter-clear";
TCDclearBtn.textContent = "✕";
TCDclearBtn.title = "Очистить";
TCDclearBtn.setAttribute("role", "button");
TCDclearBtn.setAttribute("tabindex", "0");
TCDclearBtn.style.fontSize = "12px";
TCDclearBtn.style.color = "#999";
TCDclearBtn.style.cursor = "pointer";
TCDclearBtn.style.userSelect = "none";
TCDclearBtn.style.pointerEvents = "auto";
const clearInput = function () {
input.value = "";
input.dispatchEvent(
new Event("input", {
bubbles: true
})
);
input.dispatchEvent(
new Event("change", {
bubbles: true
})
);
input.focus();
};
TCDclearBtn.addEventListener("click", clearInput);
TCDclearBtn.addEventListener("keydown", function (event) {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
clearInput();
}
});
TCDformcnt.appendChild(TCDclearBtn);
}
wrapper.appendChild(TCDformcnt);
return TCDcountform;
}
function TCDinitializeField(input, maxLength) {
if (input.dataset.tcd145Observed === "true") {
return;
}
const limit = Number(maxLength);
if (!Number.isFinite(limit) || limit < 1) {
return;
}
input.dataset.tcd145Observed = "true";
const TCDcountform = TCDCount(input);
TCDlimitInput(
input,
limit,
TCDcountform
);
}
function Ticodestartcheckform() {
const fields = document.querySelectorAll(
"input[name], textarea[name]"
);
fields.forEach(function (input) {
const name = input.name;
if (
!Object.prototype.hasOwnProperty.call(
TCDformmassive,
name
)
) {
return;
}
TCDinitializeField(
input,
TCDformmassive[name]
);
});
}
let TCDscanScheduled = false;
function TCDscheduleScan() {
if (TCDscanScheduled) {
return;
}
TCDscanScheduled = true;
const schedule =
window.requestAnimationFrame ||
function (callback) {
return setTimeout(callback, 16);
};
schedule(function () {
TCDscanScheduled = false;
Ticodestartcheckform();
});
}
Ticodestartcheckform();
const Tildachekobs = new MutationObserver(function (mutationsList) {
const hasNewElements = mutationsList.some(function (mutation) {
return (
mutation.type === "childList" &&
mutation.addedNodes.length > 0
);
});
if (hasNewElements) {
TCDscheduleScan();
}
});
Tildachekobs.observe(document.body, {
childList: true,
subtree: true
});
});
</script>
<script>
(function TCDupdType() {
const TildahtmlBlock = document.currentScript;
if (!TildahtmlBlock) {
return;
}
const recordElement = TildahtmlBlock.closest(
".r[data-record-type]"
);
if (!recordElement) {
return;
}
recordElement.setAttribute(
"data-record-type",
Math.random().toString(36).substring(2, 12)
);
})();
</script>
1. Создаем форму (можно использовать стандартные формы или формы в зеро блок). В форме добавляем поле ввода в одну строку или поле поле ввода в несколько строк и заполняем variable name. например: comment
2. В генераторе в поле "Название поля/количество символов" указываем название поля и количество символов в формате: comment: 100
Если у вас несколько полей, то указываем через запятую в формате: comment: 100, name: 20, dostavka 80
3. При необходимости можно настроить дополнительные поля в генераторе:
Счетчик символов - если включено, то справа в поле ввода появится счетчик формата 0/100. Можно настроить цвет и размер текста.
Кнопка очистки - если включено, то справа в поле ввода появиться крестик, при клике на который поле будет очищаться. Можно настроить цвет и размер крестика.
4. Копируем код и вставляем HTML блок T123. Блок Т123 размещаем под блоками с формами
2. В генераторе в поле "Название поля/количество символов" указываем название поля и количество символов в формате: comment: 100
Если у вас несколько полей, то указываем через запятую в формате: comment: 100, name: 20, dostavka 80
3. При необходимости можно настроить дополнительные поля в генераторе:
Счетчик символов - если включено, то справа в поле ввода появится счетчик формата 0/100. Можно настроить цвет и размер текста.
Кнопка очистки - если включено, то справа в поле ввода появиться крестик, при клике на который поле будет очищаться. Можно настроить цвет и размер крестика.
4. Копируем код и вставляем HTML блок T123. Блок Т123 размещаем под блоками с формами
Форма