JS实现默认显示部分文字点击按钮显示全部内容
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8" /><title>点击显示完整文字 / 点击空白恢复隐藏</title><style>.maskable {cursor: pointer;user-select: none;padding: 2px 4px;border-radius: 4px;}.maskable:focus {outline: 2px solid #3b82f6;outline-offset: 2px;}</style>
</head>
<body><p>账号：<span class="maskable" tabindex="0" data-full-text="6222 1234 5678 9876"></span></p><p>手机：<span class="maskable" tabindex="0" data-full-text="13812345678"></span></p><p>编号（长度≤4 边界示例）：<span class="maskable" tabindex="0" data-full-text="A12"></span></p><script>// 工具：把“后四位”替换为 *（长度≤4 则全部替换）function maskLastFour(text, maskChar = '*') {const s = String(text);if (s.length <= 4) return maskChar.repeat(s.length);return s.slice(0, -4) + maskChar.repeat(4);}// 初始化：把所有 .maskable 按默认规则隐藏function initMaskables() {document.querySelectorAll('.maskable').forEach(el => {const full = el.dataset.fullText?.trim() ?? '';el.dataset.revealed = 'false'; // 默认隐藏el.textContent = maskLastFour(full); // 显示成掩码// 辅助信息（无障碍）el.setAttribute('role', 'button');el.setAttribute('aria-label', '点击显示完整文字');});}// 显示/隐藏某个元素function showFull(el) {const full = el.dataset.fullText ?? '';el.textContent = full;el.dataset.revealed = 'true';el.setAttribute('aria-label', '点击隐藏');}function hideMasked(el) {const full = el.dataset.fullText ?? '';el.textContent = maskLastFour(full);el.dataset.revealed = 'false';el.setAttribute('aria-label', '点击显示完整文字');}// 事件委托：点击 .maskable 切换为显示document.addEventListener('click', (e) => {const target = e.target.closest('.maskable');if (target) {// 点到当前元素：仅这个显示完整showFull(target);e.stopPropagation(); // 阻止冒泡到 document 的“点击空白处隐藏”return;}// 点击空白处：把所有恢复为掩码document.querySelectorAll('.maskable[data-revealed="true"]').forEach(hideMasked);});// 键盘支持：Enter/Space 显示完整；Esc 恢复掩码document.addEventListener('keydown', (e) => {const active = document.activeElement;if (!active || !active.classList?.contains('maskable')) return;if (e.key === 'Enter' || e.key === ' ') {showFull(active);e.preventDefault();} else if (e.key === 'Escape') {hideMasked(active);}});// 可选：鼠标移出即恢复（若不需要可删）// document.addEventListener('mouseout', (e) => {// const el = e.target.closest('.maskable');// if (el && el.dataset.revealed === 'true') hideMasked(el);// });// 启动initMaskables();</script>
</body>
</html>
把要处理的文字放在元素上，不要直接写文字，而是写到 data-full-text：
<span class="maskable" data-full-text="13812345678"></span>
JS 会自动把它渲染成“后四位星号”。
点击该元素会显示完整；点击页面任意空白会恢复隐藏。
适用于多个元素；支持键盘（无障碍）。