131 lines
4.2 KiB
JavaScript
131 lines
4.2 KiB
JavaScript
/**
|
|
* AKSRT Input Expand
|
|
*
|
|
* Lightweight input field enhancements:
|
|
* - Textarea auto-resize on input
|
|
* - Character counter with limit display
|
|
* - Validation feedback (min/max length, required)
|
|
*
|
|
* No external dependencies — pure vanilla JS.
|
|
*
|
|
* Usage:
|
|
* <textarea data-aksrt-autoresize></textarea>
|
|
* <input data-aksrt-counter data-aksrt-maxlength="200">
|
|
* <input data-aksrt-validate data-aksrt-minlength="3" required>
|
|
*
|
|
* @package AKSRT
|
|
*/
|
|
|
|
(function () {
|
|
'use strict';
|
|
|
|
var STYLE_ID = 'aksrt-input-expand-style';
|
|
|
|
function injectStyle() {
|
|
if (document.getElementById(STYLE_ID)) return;
|
|
var style = document.createElement('style');
|
|
style.id = STYLE_ID;
|
|
style.textContent =
|
|
'.aksrt-counter{display:block;text-align:right;font-size:12px;color:#8a909c;margin-top:4px;transition:color 0.2s;}' +
|
|
'.aksrt-counter.is-over{color:#e74c3c;}' +
|
|
'.aksrt-counter.is-warn{color:#f39c12;}' +
|
|
'.aksrt-validate-msg{display:block;font-size:12px;margin-top:4px;color:#e74c3c;opacity:0;max-height:0;overflow:hidden;transition:all 0.2s;}' +
|
|
'.aksrt-validate-msg.is-visible{opacity:1;max-height:30px;}' +
|
|
'textarea[data-aksrt-autoresize]{overflow:hidden;resize:none;}';
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
// ── Auto-resize Textarea ──
|
|
|
|
function initAutoResize() {
|
|
var textareas = document.querySelectorAll('textarea[data-aksrt-autoresize]');
|
|
textareas.forEach(function (ta) {
|
|
function resize() {
|
|
ta.style.height = 'auto';
|
|
ta.style.height = ta.scrollHeight + 'px';
|
|
}
|
|
ta.addEventListener('input', resize);
|
|
// Initial resize
|
|
resize();
|
|
});
|
|
}
|
|
|
|
// ── Character Counter ──
|
|
|
|
function initCounters() {
|
|
var fields = document.querySelectorAll('[data-aksrt-counter]');
|
|
fields.forEach(function (field) {
|
|
var max = parseInt(field.getAttribute('data-aksrt-maxlength') || field.getAttribute('maxlength') || '0', 10);
|
|
var counter = document.createElement('span');
|
|
counter.className = 'aksrt-counter';
|
|
field.parentNode.insertBefore(counter, field.nextSibling);
|
|
|
|
function update() {
|
|
var len = (field.value || '').length;
|
|
if (max > 0) {
|
|
counter.textContent = len + ' / ' + max;
|
|
counter.classList.toggle('is-over', len > max);
|
|
counter.classList.toggle('is-warn', len > max * 0.9 && len <= max);
|
|
} else {
|
|
counter.textContent = len + ' 字';
|
|
counter.classList.remove('is-over', 'is-warn');
|
|
}
|
|
}
|
|
|
|
field.addEventListener('input', update);
|
|
update();
|
|
});
|
|
}
|
|
|
|
// ── Validation Feedback ──
|
|
|
|
function initValidation() {
|
|
var fields = document.querySelectorAll('[data-aksrt-validate]');
|
|
fields.forEach(function (field) {
|
|
var minLen = parseInt(field.getAttribute('data-aksrt-minlength') || field.getAttribute('minlength') || '0', 10);
|
|
var maxLen = parseInt(field.getAttribute('data-aksrt-maxlength') || field.getAttribute('maxlength') || '0', 10);
|
|
var required = field.hasAttribute('required');
|
|
|
|
var msg = document.createElement('span');
|
|
msg.className = 'aksrt-validate-msg';
|
|
field.parentNode.insertBefore(msg, field.nextSibling);
|
|
|
|
function validate() {
|
|
var val = (field.value || '').trim();
|
|
var error = '';
|
|
|
|
if (required && val === '') {
|
|
error = '此项为必填';
|
|
} else if (minLen > 0 && val.length > 0 && val.length < minLen) {
|
|
error = '至少需要 ' + minLen + ' 个字符';
|
|
} else if (maxLen > 0 && val.length > maxLen) {
|
|
error = '不能超过 ' + maxLen + ' 个字符';
|
|
}
|
|
|
|
msg.textContent = error;
|
|
msg.classList.toggle('is-visible', error !== '');
|
|
field.classList.toggle('is-invalid', error !== '');
|
|
field.classList.toggle('is-valid', error === '' && val !== '');
|
|
}
|
|
|
|
field.addEventListener('input', validate);
|
|
field.addEventListener('blur', validate);
|
|
});
|
|
}
|
|
|
|
// ── Main Init ──
|
|
|
|
function init() {
|
|
injectStyle();
|
|
initAutoResize();
|
|
initCounters();
|
|
initValidation();
|
|
}
|
|
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|