optimize input experience

This commit is contained in:
KOWX712
2025-02-13 02:13:09 +08:00
parent 24c00f124d
commit f8dfe50a0c
2 changed files with 56 additions and 6 deletions

View File

@@ -17,6 +17,7 @@
<script type="module" crossorigin src="scripts/about.js"></script>
<script type="module" crossorigin src="scripts/help.js"></script>
<script type="module" crossorigin src="scripts/vbmeta-digest.js"></script>
<script type="module" crossorigin src="scripts/security_patch.js"></script>
<script src="scripts/marked.min.js"></script>
</head>
@@ -301,22 +302,22 @@
<div id="normal-mode-inputs" class="normal-mode-inputs">
<div class="input-group">
<label id="security_patch-all">All</label>
<input type="text" id="all-patch" placeholder="20250101" maxlength="8">
<input type="text" id="all-patch" placeholder="20250101" maxlength="8" autocapitalize="none">
</div>
</div>
<div id="advanced-mode-inputs" class="advanced-mode-inputs hidden">
<div class="input-group">
<label id="security_patch-system">System</label>
<input type="text" id="system-patch" placeholder="202501">
<input type="text" id="system-patch" placeholder="202501" maxlength="6" autocapitalize="none">
</div>
<div class="input-group">
<label id="security_patch-boot">Boot</label>
<input type="text" id="boot-patch" placeholder="2025-01-01">
<input type="text" id="boot-patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this, 'boot')" maxlength="10">
</div>
<div class="input-group">
<label id="security_patch-vendor">Vendor</label>
<input type="text" id="vendor-patch" placeholder="2025-01-01">
<input type="text" id="vendor-patch" placeholder="2025-01-01" autocapitalize="none" oninput="formatDate(this, 'vendor')" maxlength="10">
</div>
</div>

View File

@@ -131,6 +131,55 @@ async function loadCurrentConfig() {
}
}
// Unified date formatting function
window.formatDate = function(input, type) {
let value = input.value.replace(/-/g, '');
let formatted = value.slice(0, 4);
// Allow 'no' input
if (value === 'no') {
input.value = 'no';
input.setSelectionRange(2, 2);
return 'no';
}
if (value.startsWith('n')) {
// Only allow 'o' after 'n'
if (value.length > 1 && value[1] !== 'o') {
value = 'n';
}
formatted = value.slice(0, 2);
if (value.length > 2) {
input.value = formatted;
input.setSelectionRange(2, 2);
return formatted;
}
} else {
// Add hyphens on 5th and 7th character
if (value.length >= 4) {
formatted += '-'+ value.slice(4, 6);
}
if (value.length >= 6) {
formatted += '-'+ value.slice(6, 8);
}
}
// Handle backspace/delete
const lastChar = value.slice(-1);
if (lastChar === '-' || (isNaN(lastChar) && !['n'].includes(lastChar))) {
formatted = formatted.slice(0, -1);
}
// Update input value
const startPos = input.selectionStart;
input.value = formatted;
const newLength = formatted.length;
const shouldMoveCursor = (value.length === 4 || value.length === 6) && newLength > startPos;
input.setSelectionRange(shouldMoveCursor ? newLength : startPos, shouldMoveCursor ? newLength : startPos);
return formatted;
}
// Validate date format YYYY-MM-DD
function isValidDateFormat(date) {
if (date === 'no') return true;
@@ -221,7 +270,7 @@ export function securityPatch() {
}
} else {
// Advanced mode validation
const bootValue = bootPatchInput.value.trim();
const bootValue = formatDate(bootPatchInput, 'boot');
const systemValue = systemPatchInput.value.trim();
const vendorValue = vendorPatchInput.value.trim();
@@ -262,4 +311,4 @@ export function securityPatch() {
hideSecurityPatchDialog();
loadCurrentConfig();
});
}
}