Как создать принудительный шаблон с помощью Javascript ⇐ Html

[Anonymous]

Я пытаюсь заставить следовать шаблону, заставляя первую букву слова заглавной, а остальные строчные, но когда я набираю специальный символ, он превращает следующий символ в верхний регистр, и я хочу, чтобы он все-таки принудительно переводил строчные буквы символы, кроме первой буквы каждого слова. На мой взгляд, это должно сработать. Похоже, он правильно запрограммирован на разделение по пробелу, а не по специальному символу.

Код: Выделить всё

document.addEventListener("DOMContentLoaded", function() {
const displaynameInput = document.getElementById('display_name');

function sanitizeDisplayNameInput() {
let value = displaynameInput.value;

const minLength = 2; // Minimum length for display name
const maxLength = 50; // Maximum length for display name

if (!/^[a-zA-Z]/.test(value)) {
value = value.replace(/^[^a-zA-Z]+/, ''); // Remove all non-alphabet characters at the start
}

if (value.replace(/\s/g, '').length > maxLength) {
value = value.substring(0, value.length - 1);
displaynameInput.value = value;
return;
}

value = value.replace(/^\s+/g, ''); // Remove leading spaces only

value = value.replace(/\s{2,}/g, ' '); // Replace multiple spaces with a single space

// Ensure the value is between min and max length
if (value.replace(/\s/g, '').length < minLength || value.replace(/\s/g, '').length > maxLength) {
document.getElementById("display_name-check-btn").style.display = "none";
} else {
document.getElementById("display_name-check-btn").style.display = "block";
}

// Remove any words with non-English characters
value = value.replace(/[^\x00-\x7F]/g, '');

// Split the value into words
let parts = value.split(' ');

// Process each part
value = parts
.map((word, index) => {
if (word.length === 0) return ''; // Skip empty words

// Convert the whole word to lowercase and then capitalize the first letter
return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();

// Allow any other characters or numbers at the start of words
return word;
})
.join(' '); // Rejoin the parts into a single string

// Update the display name input with the sanitized value
displaynameInput.value = value;
}

// Add event listeners
displaynameInput.addEventListener('input', sanitizeDisplayNameInput);
displaynameInput.addEventListener('blur', function() {
sanitizeDisplayNameInput();
// Remove trailing spaces when the user leaves the field
displaynameInput.value = displaynameInput.value.trimEnd();
});
});

Код: Выделить всё

.login form input[type="password"],
.login form input[type="text"],
.login form input[type="email"],
.register form input[type="password"],
.register form input[type="text"],
.register form input[type="email"] {
width: 80%;
height: 50px;
border: 1px solid #dee0e4;
border-left: 0;
margin-bottom: 20px;
padding: 0 15px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
outline: 0;

Код: Выделить всё

Кто-нибудь может помочь? Кажется, в этой форме это не работает, но вы можете проверить мой сайт. Я не знаю, разрешено ли мне публиковать это здесь, но оно есть на моем аватарке.

Подробнее здесь: https://stackoverflow.com/questions/793 ... javascript