So erstellen Sie ein erzwungenes Muster mit Javascript ⇐ HTML

[Guest]

Ich versuche, die Einhaltung des a-Musters zu erzwingen, indem ich den ersten Buchstaben eines Wortes in Großbuchstaben und den Rest in Kleinbuchstaben schreibe, aber wenn ich ein Sonderzeichen eingebe, wird das folgende Zeichen in Großbuchstaben umgewandelt, und ich möchte, dass schließlich Kleinbuchstaben erzwungen werden Zeichen außer dem ersten Buchstaben jedes Wortes. Für mich sieht es so aus, als ob es funktionieren sollte. Es sieht so aus, als ob es ordnungsgemäß programmiert ist, um am Leerzeichen und nicht an einem Sonderzeichen zu teilen.

Code: Select all

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();
});
});

Code: Select all

.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;

Code: Select all

Check Availability

Kann mir bitte jemand helfen? In dieser Form scheint es hier nicht zu funktionieren, aber Sie können auf meiner Website nachsehen. Ich weiß zwar nicht, ob ich es hier posten darf, aber es ist auf meinem Profilbild.