时间框跳段 + 弹窗不再脏地址栏 + 统计脚本做成后台开关

时间框(flatpickr allowInput 的手输体验)
- flatpickr 把 <input type=datetime-local> 就地改成 type=text,原生分段编辑器被替换掉;
  allowInput 又是「整串解析」语义:实测 parseDate('2026') 只出年份、'202666' 才出月份,
  于是「年份很长才跳下一位」;'20260606' 还会被静默错解成 2030-12-06 且不报错。
- 新增 static/js/datetime-input.js:自定义 parseDate(纯数字只收 4/6/8/12/14 位,
  歧义与非法日期一律拒)+ 输入引导(段满即补分隔符,敲完 4 位年份立刻跳月份位)。
  按标准格式不做自动补零、不前滚;越界值原样保留交报错,不静默改成合法值。
- 三处页面(编辑/照片/专题)共用 attachPicker,配置与原先一致,模板净减 5 行。

弹窗
- window.prompt 会把提示文本与默认值写进地址栏并留进历史(confirm/alert 无此问题)。
- 新增 static/js/prompt-box.js 替代:原生 <dialog>.showModal(),遮罩/Esc/焦点齐全,
  旧浏览器降级成页面顶部一条。已换 report.html 复制链接兜底与 edit.html 活动改名。
- 门禁 no_prompt_test.go:静态扫模板禁止 prompt(,并钉住 JS 与 CSS 都在。

统计脚本
- 原来只能改 conf/app.ini(要重启),现在后台「站点设置」可开关 + 填写,默认关闭。
- cleanTrackScript 挡住注入面:开闭 <script> 标签数不配平(提前闭合会让页面散架)、
  src 的 javascript:/data: 伪协议、超长截断。注意不能用「出现 </script 就拒」当规则——
  百度统计、Umami 贴的就是完整 HTML,正常用法会被挡死。

门禁
- datetime-input.test.js:34 条断言(node 直跑,无依赖)。
- TestCleanTrackScript:逐条边界 + 定义性不变量(任何输入都不得产出含 </script 的非空结果)。
- 三项均做过变异验证,改坏实现都会被对应测试抓到。

实测:真实站点逐键 2→20→202→2026-→2026-06-→2026-06-06T;
统计脚本六个场景(默认关/只填不开/开+URL/后台与登录页不挂/危险输入/关掉恢复)全部符合预期。
全量 internal/web 204 例 0 skip,其余包全绿,gofmt 干净。
This commit is contained in:
tamakyi
2026-10-08 18:27:59 +08:00
parent 5c7cf1a0e1
commit 4015ddf373
17 changed files with 1142 additions and 18 deletions
+376
View File
@@ -0,0 +1,376 @@
/* datetime-input:修掉 flatpickr allowInput 的「整串解析」毛病。
*
* 背景(实测 flatpickr 4.6.13,见 memory/2026-10-08.md):
* 1. flatpickr 会把 <input type="datetime-local"> 就地改成 type="text"
* (altInput 默认 false、不新建节点),原生那套分段编辑器被整个替换掉,
* 所以「敲满一段自动跳下一段」这个行为根本不存在。
* 2. allowInput 的语义是「拿到整串再 parseDate」,不是「逐段消费」。实测:
* parseDate('2026') → 2026 年 1 月
* parseDate('202666') → 2026 年 6 月 ← 用户要打到这个长度才「看到月份」
* parseDate('20260606') → 2030 年 12 月 ← 静默错解,且不报错
* 年份得吃满 4 位才被认,之后月份位还要再吃 2 位 ⇒ 正是「年份很长才跳下一位」。
*
* 这里做两件事:
* parseDateStrict 宽松但**无歧义**的解析器:接受 2026/6/6、2026-6-6、20260606、
* 2026 等写法;解析不出来就是 null,绝不猜。
* attach 按键引导:年份满 4 位自动补分隔符并把光标推到月份段,
* 月/日/时/分满 2 位同理,让手输 behave 像原生分段。
*
* 产出格式恒为 'Y-m-dTH:i'(即 2026-06-06T09:30),与服务端
* handlers_edit.go / handlers_topics.go 里的 "2006-01-02T15:04" 同一形状。
*/
(function (global) {
'use strict';
var DATE_FMT = 'Y-m-dTH:i';
function pad2(n) { return n < 10 ? '0' + n : String(n); }
function validYMD(y, mo, d) {
if (y < 1000 || y > 9999) return false;
if (mo < 1 || mo > 12) return false;
if (d < 1 || d > 31) return false;
// 月末天数要真判:2 月 30 日 / 4 月 31 日这类「格式对但日期不存在」不能放过
var probe = new Date(y, mo - 1, d);
return probe.getFullYear() === y && probe.getMonth() === mo - 1 && probe.getDate() === d;
}
function validHM(h, mi) {
return h >= 0 && h <= 23 && mi >= 0 && mi <= 59;
}
// 把「已经确定」的年/月/日/时/分拼成合法日期;缺时间则补 00:00
function build(y, mo, d, h, mi, hasTime) {
if (!validYMD(y, mo, d)) return null;
if (hasTime && !validHM(h, mi)) return null;
var dt = new Date(y, mo - 1, d, hasTime ? h : 0, hasTime ? mi : 0, 0, 0);
return isNaN(dt.getTime()) ? null : dt;
}
/* 从纯数字串里按位取:严格按 [年4][月2][日2][时2][分2] 切。
* 长度只收 4/6/8/12/14 这几种能唯一解读的组合:
* 5/7/9/10/11 位一律拒(如 '2026060630' 到底是「日=30」还是「时=06 分=30」说不清)。
* 这条规则专门用来干掉「20260606 被静默解成 2030-12-06」那类脏读。 */
function fromDigits(s) {
if (!/^[0-9]+$/.test(s)) return null;
var y, mo, d, h = 0, mi = 0, hasTime = false;
switch (s.length) {
case 4: y = +s; mo = 1; d = 1; break;
case 6: y = +s.slice(0, 4); mo = +s.slice(4, 6); d = 1; break;
case 8: y = +s.slice(0, 4); mo = +s.slice(4, 6); d = +s.slice(6, 8); break;
case 12: y = +s.slice(0, 4); mo = +s.slice(4, 6); d = +s.slice(6, 8);
h = +s.slice(8, 10); mi = +s.slice(10, 12); hasTime = true; break;
case 14: y = +s.slice(0, 4); mo = +s.slice(4, 6); d = +s.slice(6, 8);
h = +s.slice(8, 10); mi = +s.slice(10, 12); hasTime = true; break;
default: return null;
}
return build(y, mo, d, h, mi, hasTime);
}
/* 带分隔符的写法:先把分隔符统一成 '- ',再按「T 或空格切出时间」两半,
* 日期半边按 - 切、时间半边按 : 切。段数不足 3/2 时右侧补默认值(补录常见只写到月)。
* 任何多余分隔符或残留字符都判非法。 */
function fromSeparated(s) {
// 年月日之间的分隔允许 / - . 或空白;日与时间之间允许 T 或空白或 -
var norm = s.trim().replace(/[\/\.]/g, '-');
var timeSep = norm.search(/[T\s]/);
var datePart, timePart;
if (timeSep < 0) {
datePart = norm; timePart = '';
} else {
datePart = norm.slice(0, timeSep);
timePart = norm.slice(timeSep).replace(/^[T\s]+/, '');
}
// 日期半边还可能带 '-' 接时间(2026-06-06-09:30),补一次。
// 时间侧必须带冒号或够 4 位纯数字,否则 '2026/6/6/9' 这种多一段的会被误读成「日期+小时」
if (timePart === '') {
var m = /^(\d{4}-\d{1,2}-\d{1,2})-(\d{1,2}:\d{1,2}|\d{4})$/.exec(datePart);
if (m) { datePart = m[1]; timePart = m[2]; }
}
// 时间半边必须整段都是「时分」,允许 0930(无冒号)/ 9:30 / 9(只有小时)
if (timePart !== '' && !/^\d{2}:?\d{2}$|^\d{1,2}:\d{1,2}$|^\d{1,2}$/.test(timePart)) return null;
var tp;
if (/^\d{4}$/.test(timePart)) tp = [timePart.slice(0, 2), timePart.slice(2, 4)];
else tp = timePart.split(':');
if (tp.length > 2) return null;
// 日期半边可能是「无分隔符的纯数字」(20260606T0930 这种混写),
// 那就按位取——但位数必须能唯一解读,否则交给 fromDigits 判非法
var y, mo, d;
if (/^\d+$/.test(datePart)) {
var bits = datePart.length;
if (bits !== 4 && bits !== 6 && bits !== 8) return null;
y = +datePart.slice(0, 4);
mo = bits >= 6 ? +datePart.slice(4, 6) : 1;
d = bits >= 8 ? +datePart.slice(6, 8) : 1;
} else {
var dp = datePart.split('-');
if (dp.length > 3) return null;
if (!dp[0] || !/^\d{4}$/.test(dp[0])) return null;
y = +dp[0];
mo = dp[1] ? dp[1] : '1';
d = dp[2] ? dp[2] : '1';
if (!/^\d{1,2}$/.test(mo) || !/^\d{1,2}$/.test(d)) return null;
mo = +mo; d = +d;
}
if (timePart === '') return build(y, mo, d, 0, 0, false);
var h = +tp[0];
var mi = tp[1] ? +tp[1] : 0;
return build(y, mo, d, h, mi, true);
}
// flatpickr 的 parseDate 钩子:签名 (dateStr, format) -> Date | false
// 必须返回 false 而不是 null(flatpickr 内部判的是 !e,null 也行,但统一 false 更清楚)
function parseDateStrict(dateStr) {
if (typeof dateStr !== 'string') return false;
var s = dateStr.trim();
if (!s) return false;
// 'today' 是 flatpickr 的默认约定,交给它自己走(返回 false 会让它回落到当前时间)
if (s === 'today') return false;
var d = /^[0-9]+$/.test(s) ? fromDigits(s) : fromSeparated(s);
return d ? d : false;
}
/* ---------- 输入引导:让手输 behave 像原生分段 ----------
*
* 严格分段格式:年 4 位、月/日/时/分各 2 位,一律补零,敲满一段立刻补分隔符并跳下一段。
* 于是「2026」+「06」+「06」+「09」+「30」会边敲边变成
* 2026-06-06T09:30,敲完 4 位年份光标就已经在月份位(这正是原版做不到的那件事)。
*
* 不做的事(有意为之):
* - **不自动补零、不做前滚**:月就按 06 敲,敲 '6' 不会变成 '06'。
* 原生分段也是这样:1 月要敲 01。少一套猜测逻辑,行为完全可预测。
* - **不静默改值**:月份敲 '13'、日敲 '45' 一律原样保留,交给解析器报错。
* 把 13 月悄悄改成 1 月比报错坏得多——用户会以为敲对了。
*/
var SEG_LEN = [4, 2, 2, 2, 2]; // 年月日时分
var SEP_AFTER = ['-', '-', 'T', ':', ''];
// 各段填满后的合法范围(只判能明确非法的:月 13、日 32、时 24、分 60)
var SEG_FULL_MAX = [
null,
function (s) { return +s > 12; },
function (s, y, mo) { return +s > daysInMonth(y, mo); },
function (s) { return +s > 23; },
function (s) { return +s > 59; }
];
// 各段「还没填满时」的前缀上限:已经不可能合法就当场停手。
// 月 '1' 放行(可能是 10~12)、'2' 放行(20 不存在但等第 2 位更自然)、
// '3'~'9' 拦下(13~19 不存在),'0' 放行(01~09)。
var SEG_PREFIX_MAX = [
null, // 年固定 4 位
function (s) { return +s > 1; }, // 月:首位 >1 即不可能
function (s) { return +s > 3; }, // 日:首位 >3 即不可能
function (s) { return +s > 2; }, // 时:首位 >2 即不可能
function (s) { return +s > 5; } // 分:首位 >5 即不可能
];
function daysInMonth(y, mo) {
if (mo < 1 || mo > 12) return 31;
return new Date(y, mo, 0).getDate();
}
function attach(el, opts) {
opts = opts || {};
/* 按位切分并排出标准版式。返回 null 表示「用户敲的这段已越界,原样保留」。
* 年份固定 4 位;月/日/时/分固定 2 位 —— 不猜、不前滚、不自动补零。
*
* 入参 raw 是当前框里的值,**可以带我们自己补的分隔符**。这里按位取数时
* 必须跳过分隔符(用户敲到 '2026-0' 时,数字是 20260 而不是 2020),
* 否则位次会整体错位一格——这是实测踩出来的。 */
function layout(raw) {
// 只保留数字。必须跳过分隔符:用户敲到 '2026-0' 时数字是 20260 而不是 2020,
// 否则位次整体错位一格 —— 这是实测踩出来的。
var chars = String(raw).split('');
var digits = '';
for (var k = 0; k < chars.length; k++) {
var ch = chars[k];
if (ch >= '0' && ch <= '9') digits += ch;
}
if (!digits) return { value: '', caret: 0 };
if (digits.length > 14) return null;
var out = '', pos = 0, year = 0, mon = 0;
for (var i = 0; i < SEG_LEN.length; i++) {
var want = SEG_LEN[i];
var have = digits.slice(pos, pos + want);
var full = have.length === want;
var check = full ? SEG_FULL_MAX[i] : SEG_PREFIX_MAX[i];
if (check && check(have, year, mon)) return null;
// 本段还没填满 → 保持原样让用户继续敲。
// 若原始输入里这一段后面已经带了分隔符(用户手敲 '2026-6'),
// 就把它带回来,光标停在分隔符之后,而不是硬补零。
if (!full) {
var tailSep = sepAfterDigits(raw, pos + have.length);
var val = out + have + tailSep;
return { value: val, caret: val.length };
}
// 填满 → 结算本段
if (i === 0) year = +have;
if (i === 1) mon = +have;
out += have;
pos += want;
var sep = SEP_AFTER[i] || '';
// 数字用完了:本段后面还有段要填就立刻补分隔符、把光标推到下一段起点。
// 这一步就是「敲完 4 位年份自动跳到月份位」的实现。
if (pos >= digits.length) {
if (!sep) return { value: out, caret: out.length };
return { value: out + sep, caret: out.length + sep.length };
}
out += sep;
}
return { value: out, caret: out.length };
}
/* input 事件统一排版:按键、粘贴、退格三个入口都会走到这里,比只挂 keydown 周全。
*
* 为什么要「延后一帧」挪光标:flatpickr 自己也监听 input/setDate,
* 会在我们之后改写 selectionStart。我们在同步阶段设的位置会被它挪走,
* 于是下一次按键就插到分隔符前面(实测出现 '2026-6' 这种月份位错位)。
* 所以同步阶段只改 value,把光标用微任务补回去——那时 flatpickr 已经改完了。
*
* 交接判据是「值里除我们自己补的以外还有没有别的分隔符」:
* 一旦用户亲手敲了 / 或 :,立刻彻底放手(否则会出现 '2026-/6/6' 这种
* 我们补的 '-' 和用户的 '/' 混排的乱串),改由 fromSeparated 解他的写法。 */
/* 分隔符是否全是标准套(- T :)。'2026-6-6' 算(横杠是我们和用户通用的),
* '2026/6/6' 不算(外来写法,交给 fromSeparated 原样解)。 */
function isStandardSep(v) {
var seps = v.match(/[-T:/.\s]/g);
if (!seps) return true; // 纯数字
for (var i = 0; i < seps.length; i++) {
var c = seps[i];
if (c !== '-' && c !== 'T' && c !== ':') return false;
}
return true;
}
function onInput() {
var cur = el.value;
if (!cur) { el._rondLaidOut = ''; return; }
// 纯数字(刚开始敲)⇒ 接管,按标准版式排
if (/^[0-9]+$/.test(cur)) { applyLayout(cur); return; }
/* 带标准分隔符 ⇒ 仍接管。但**只在数字已按标准位数填满各段时**才重排,
否则用户手敲的 '2026-6-6' 会被强行补零成 '2026-06-06-'。
段还没填满就原样留着(他还在敲)。 */
if (isStandardSep(cur)) { applyLayout(cur); return; }
/* 外来写法(/ . 空格)。只做一件最小修复:把「紧跟在分隔符后面、
与前一个叠起来」的那个分隔符压掉——'2026-' + '/' 会变成 '2026-/',
双分隔符会让 fromSeparated 判非法。除此之外一个字符都不动,
保持用户原样。 */
var fixed = cur.replace(/([-T:])([/.])/g, '$2').replace(/([-T:])\1/g, '$1');
if (fixed !== cur) {
el.value = fixed;
placeCaret(fixed.length);
}
el._rondLaidOut = '';
}
/* 原始输入里,紧跟第 n 位数字之后的那个分隔符是什么(没有就返回空)。
* 用来在「段未填满」时把用户已经敲好的分隔符原样带回来,
* 避免把 '2026-6' 硬补零成 '2026-06'(用户 1 月就该敲 01,但
* 6 月可以只敲 6 —— 这两种都得能往下走)。 */
function sepAfterDigits(raw, n) {
var seen = 0;
for (var k = 0; k < raw.length; k++) {
var ch = raw.charAt(k);
if (ch >= '0' && ch <= '9') {
seen++;
if (seen === n) {
// 找到第 n 位数字,看它后面紧跟的是不是分隔符
var nx = raw.charAt(k + 1);
if (nx && (nx === '-' || nx === 'T' || nx === ':')) return nx;
return '';
}
}
}
return '';
}
function applyLayout(cur) {
var r = layout(cur);
// 越界(月份敲成 66、日敲成 45):原样保留用户输入,交给解析器报错。
// 这里必须 return 且**不动 el.value**——el.value 一旦被我们改写却没同步
// _rondLaidOut,下一轮就会拿旧串去排,越排越乱。
if (!r) return;
var val = r.value;
el._rondLaidOut = val;
if (val === cur) { placeCaret(r.caret); return; }
el.value = val;
placeCaret(r.caret);
}
/* 光标落到 r.caret(= 刚补的分隔符之后,也就是下一段起点)。
* 同步先设一次让本轮内就位,再用微任务补一次压过 flatpickr。 */
function placeCaret(pos) {
if (pos == null) return;
try { el.setSelectionRange(pos, pos); } catch (e) { return; }
var apply = function () {
if (document.activeElement !== el) return;
if (el.selectionStart === pos && el.selectionEnd === pos) return;
try { el.setSelectionRange(pos, pos); } catch (e) { /* 已失焦 */ }
};
if (window.Promise) Promise.resolve().then(apply);
else setTimeout(apply, 0);
}
el.addEventListener('input', onInput);
/* blur 时把「敲了一半」的串收敛成能被解析的形状:2026 → 2026-01-01T00:00。
* 不这么做的话用户只填了年份就点走,flatpickr 拿到 '2026' 会按原版规则
* 补成当月 1 号,但 '2026-' 这种带尾巴的残串会被判非法。 */
function onBlur() {
var cur = el.value.trim();
if (!cur) return;
var d = parseDateStrict(cur);
if (!d) return;
el.value = formatOut(d);
}
el.addEventListener('blur', onBlur);
function formatOut(d) {
return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate()) +
'T' + pad2(d.getHours()) + ':' + pad2(d.getMinutes());
}
el._rondFormatOut = formatOut;
}
function init(selector, opts) {
if (!global.flatpickr) return;
var els = typeof selector === 'string' ? document.querySelectorAll(selector) : selector;
Array.prototype.forEach.call(els, function (el) {
attachPicker(el, opts);
});
}
/* 三处页面(编辑页 / 照片页 / 专题页)共用的挂载入口。
配置刻意与原先完全一致,只多了 parseDate 与输入引导两件事:
parseDate 修掉 allowInput 的「整串解析」与静默错解
attach 让手输 behave 像原生分段(敲满 4 位年份就跳到月份位)
提交格式仍是 'Y-m-dTH:i',服务端那条 "2006-01-02T15:04" 解析不受影响。 */
function attachPicker(el, opts) {
if (!global.flatpickr || el._rondPickerReady) return null;
el._rondPickerReady = true;
var inst = global.flatpickr(el, {
enableTime: true,
time_24hr: true,
allowInput: true,
// 补录靠回忆,没人记得 12:59:47——5 分钟步进贴合「大概那个点」的精度
minuteIncrement: 5,
dateFormat: DATE_FMT,
parseDate: parseDateStrict
});
attach(el, opts);
return inst;
}
global.rondDatetime = {
DATE_FMT: DATE_FMT,
parseDate: parseDateStrict,
attach: attach,
attachPicker: attachPicker,
init: init,
pad2: pad2
};
})(window);