Shortcut Recorder — Capture Keyboard Hotkeys in a Field

<div class="sk-card">
  <h3>Keyboard shortcuts</h3>
  <ul class="sk-list" id="skList">
    <li class="sk-row" data-action="Save"><span>Save</span><button type="button" class="sk-field" data-combo="Ctrl+S"></button></li>
    <li class="sk-row" data-action="Command palette"><span>Command palette</span><button type="button" class="sk-field" data-combo="Ctrl+K"></button></li>
    <li class="sk-row" data-action="New item"><span>New item</span><button type="button" class="sk-field" data-combo=""></button></li>
  </ul>
  <p class="sk-hint" id="skHint">Click a shortcut, then press a key combination.</p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0;display:flex;justify-content:center;padding:40px 20px}

.sk-card{background:#1e293b;border:1px solid #334155;border-radius:18px;padding:22px;width:100%;max-width:380px}
.sk-card h3{font-size:16px;font-weight:800;color:#f1f5f9;margin-bottom:14px}

.sk-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.sk-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sk-row>span{font-size:13.5px;font-weight:600;color:#cbd5e1}

.sk-field{min-width:128px;text-align:center;background:#0f172a;border:1px solid #334155;border-radius:9px;padding:7px 10px;font-family:inherit;font-size:12px;color:#94a3b8;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.sk-field:hover{border-color:#475569}
.sk-field.sk-recording{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.25);color:#a5b4fc}
.sk-field.sk-dupe{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.2)}
.sk-field .sk-kbd{display:inline-block;background:#334155;color:#e2e8f0;border-radius:5px;padding:2px 7px;font-size:11px;font-weight:700;margin:0 2px;font-family:ui-monospace,monospace}
.sk-field .sk-plus{color:#475569;margin:0 1px}

.sk-hint{margin-top:14px;font-size:12px;color:#64748b;min-height:18px}

var fields = Array.prototype.slice.call(document.querySelectorAll('.sk-field'));
var hint = document.getElementById('skHint');
var recording = null;
var MODS = ['Control', 'Alt', 'Shift', 'Meta'];
var PRETTY = { Control: 'Ctrl', Meta: navigator.platform.indexOf('Mac') > -1 ? 'Cmd' : 'Win', ' ': 'Space', ArrowUp: '↑', ArrowDown: '↓', ArrowLeft: '←', ArrowRight: '→', Escape: 'Esc' };

function renderCombo(field) {
  var combo = field.getAttribute('data-combo');
  if (!combo) { field.textContent = field.classList.contains('sk-recording') ? 'Press keys…' : 'Not set'; return; }
  field.innerHTML = combo.split('+').map(function (k, i) {
    return (i ? '<span class="sk-plus">+</span>' : '') + '<span class="sk-kbd">' + k + '</span>';
  }).join('');
}

function isDuplicate(combo, self) {
  return fields.some(function (f) { return f !== self && f.getAttribute('data-combo') === combo && combo; });
}

function stop() {
  if (!recording) return;
  recording.classList.remove('sk-recording');
  renderCombo(recording);
  recording = null;
  hint.textContent = 'Click a shortcut, then press a key combination.';
}

function start(field) {
  stop();
  recording = field;
  field.classList.add('sk-recording');
  renderCombo(field);
  hint.textContent = 'Recording… press Esc to cancel.';
}

fields.forEach(function (field) {
  renderCombo(field);
  field.addEventListener('click', function () { recording === field ? stop() : start(field); });
});

document.addEventListener('keydown', function (e) {
  if (!recording) return;
  e.preventDefault();
  if (e.key === 'Escape') { stop(); return; }
  if (MODS.indexOf(e.key) > -1) return; // wait for a non-modifier key

  var parts = [];
  if (e.ctrlKey) parts.push('Ctrl');
  if (e.metaKey) parts.push(PRETTY.Meta);
  if (e.altKey) parts.push('Alt');
  if (e.shiftKey) parts.push('Shift');
  var key = PRETTY[e.key] || (e.key.length === 1 ? e.key.toUpperCase() : e.key);
  parts.push(key);
  var combo = parts.join('+');

  recording.setAttribute('data-combo', combo);
  var dupe = isDuplicate(combo, recording);
  recording.classList.toggle('sk-dupe', dupe);
  var field = recording;
  stop();
  field.classList.toggle('sk-dupe', dupe);
  renderCombo(field);
  hint.textContent = dupe ? 'That combination is already used.' : 'Saved ' + combo + '.';
});