Allowing spaces in the input and ensuring the tags container wraps properly

This commit is contained in:
2026-01-16 13:05:03 +01:00
parent b561c94e20
commit 1190aa4f38
2 changed files with 40 additions and 5 deletions

View File

@@ -467,6 +467,25 @@ button.bg-red-500:hover, button.bg-red-600:hover {
color: #f3f4f6;
}
/* Ignore IPs container - ensure proper wrapping and prevent horizontal overflow */
#ignoreIPsContainer {
overflow-x: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
}
#ignoreIPsTags {
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
}
.ignore-ip-tag {
max-width: 100%;
word-break: break-all;
overflow-wrap: anywhere;
}
#wsTooltip .border-gray-700 {
border-color: rgb(55 65 81);
}

View File

@@ -68,14 +68,14 @@ function setupIgnoreIPsInput() {
const input = document.getElementById('ignoreIPInput');
if (!input) return;
// Prevent typing invalid characters - only allow valid IP/hostname characters
// Allow spaces for space-separated lists, but validate on paste/enter/blur
let lastValue = '';
input.addEventListener('input', function(e) {
// Filter out invalid characters but allow valid IP/hostname characters
// Allow: 0-9, a-z, A-Z, :, ., /, -, _ (for hostnames)
// Allow spaces for space-separated lists
// Allow: 0-9, a-z, A-Z, :, ., /, -, _, space (for space-separated lists)
let value = this.value;
// Remove any characters that aren't valid for IPs/hostnames
const filtered = value.replace(/[^0-9a-zA-Z:.\/\-_]/g, '');
// Remove any characters that aren't valid for IPs/hostnames or spaces
const filtered = value.replace(/[^0-9a-zA-Z:.\/\-\_\s]/g, '');
if (value !== filtered) {
this.value = filtered;
}
@@ -101,5 +101,21 @@ function setupIgnoreIPsInput() {
ips.forEach(ip => addIgnoreIPTag(ip.trim()));
}
});
// Handle paste events to automatically process space-separated lists
input.addEventListener('paste', function(e) {
// Allow default paste behavior first
setTimeout(() => {
const value = input.value.trim();
if (value) {
// Check if pasted content contains spaces (likely a space-separated list)
if (value.includes(' ') || value.includes(',')) {
const ips = value.split(/[,\s]+/).filter(ip => ip.trim());
ips.forEach(ip => addIgnoreIPTag(ip.trim()));
input.value = ''; // Clear input after processing
}
}
}, 0);
});
}