补充主题静态资源与归档模板

assets/js/input-expand.js

@@ -0,0 +1,130 @@
+/**
+ * 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();
+  }
+})();