/* 家书 · 前端小助手(无框架,无构建步骤) */ (function () { 'use strict'; // ===== 时间框:点输入框任意一处都弹出选择器 ===== // 原生行为只在点右侧那个小日历图标时才弹(而且各浏览器还不一致), // 用户会以为框只能读、或者找不到那个图标在哪。 // showPicker() 是标准做法:在 click 里调它,等于把整块输入区都当成了那个图标。 // // 为什么能跟浏览器自带的那次弹出共存:若本次点击已经弹过,再调一次是空操作 // (规范里「show the picker」对已经显示的选择器直接返回),不会闪两下。 // 不支持的浏览器(老 Safari 等)静默跳过 —— 退化成原生行为,不会比现在更差。 (function () { var pickers = document.querySelectorAll('input[type="date"], input[type="datetime-local"]'); function hook(el) { el.addEventListener('click', function () { if (typeof el.showPicker !== 'function') { return; } try { el.showPicker(); } catch (err) { // NotAllowedError:不是用户手势触发的(或被跨域 iframe 挡住)。 // 忽略即可 —— 原生那套点击行为还在,用户仍有办法选时间。 } }); } for (var i = 0; i < pickers.length; i++) { hook(pickers[i]); } })(); // 头像选好后即时预览,别等上传完才知道选错了 var fileInput = document.getElementById('avatar'); if (fileInput && window.FileReader) { fileInput.addEventListener('change', function () { var f = this.files && this.files[0]; if (!f) { return; } var img = document.getElementById('avatar-preview'); if (!img) { return; } var reader = new FileReader(); reader.onload = function (ev) { img.src = ev.target.result; }; reader.readAsDataURL(f); }); } // 头像加载失败时换回内置剪影 —— 保证任何时候都不会出现破图 Array.prototype.forEach.call(document.querySelectorAll('img'), function (img) { img.addEventListener('error', function () { if (img.dataset.fallbackDone) { return; } img.dataset.fallbackDone = '1'; img.src = '/assets/avatar-default.svg'; }); }); // ===== 三个生日:选择"以哪个为准" ===== // 阳历与农历其实是同一个人的同一天,不能各填各的(那样就自相矛盾了)。 // 表单上让用户明确指定"我这次填的是哪一个",服务端据此反推另一个。 (function () { var sel = document.getElementById('bdSource'); if (!sel) { return; } var solarBox = document.getElementById('bdSolarWrap'); var lunarBox = document.getElementById('bdLunarWrap'); function sync() { var isLunar = sel.value === 'lunar'; if (solarBox) { solarBox.classList.toggle('is-primary', !isLunar); } if (lunarBox) { lunarBox.classList.toggle('is-primary', isLunar); } } sel.addEventListener('change', sync); sync(); })(); // ===== 身份证号 → 即时算出「身份证生日」 ===== // 让用户当场看到"系统从证件里读出来的是哪一天", // 而不是存下去之后才发现跟自己的生日差了一个月。 (function () { var idc = document.getElementById('id_card'); var out = document.getElementById('idCardBirthday'); if (!idc || !out) { return; } function pad(n) { return (n < 10 ? '0' : '') + n; } function calc() { var s = (idc.value || '').toUpperCase().replace(/\s/g, ''); var y, m, d; if (/^\d{17}[\dX]$/.test(s)) { y = +s.substr(6, 4); m = +s.substr(10, 2); d = +s.substr(12, 2); } else if (/^\d{15}$/.test(s)) { y = 1900 + +s.substr(6, 2); m = +s.substr(8, 2); d = +s.substr(10, 2); } else { out.textContent = ''; return; } if (m < 1 || m > 12 || d < 1 || d > 31) { out.textContent = ''; return; } out.textContent = y + '-' + pad(m) + '-' + pad(d); } idc.addEventListener('input', calc); calc(); })(); })();