Я хочу запретить ввод цифр и специальных символов, чтобы заставить символ находиться в первой позиции

Я уже добился успеха в других вещах:

  • запрещено, чтобы первый символ был пробелом с помощью JavaScript
  • предотвращено использование последовательных пробелов с помощью JavaScript
  • заставил каждое слово во входных данных писать с заглавной буквы, используя HTML Теперь я хочу, чтобы первый символ был буквой, чтобы предотвратить использование числа и специального символа только в первом символе. Я знаю, что это можно сделать, но не могу найти этот полезный код. Я так много сделал и это последнее, что мне нужно для моей формы! :D

Вот как я сделал все вышеперечисленное:

function SpaceBlock() {
    var space = document.getElementById("real_name");
        if (space.selectionStart === 0 && window.event.code === "Space"){
            window.event.preventDefault(); } }

function SpaceBlock2() {
    var space = document.getElementById("display_name");
        if (space.selectionStart === 0 && window.event.code === "Space"){
            window.event.preventDefault();} }
            
var lastkey;
var ignoreChars = ' \r\n'+String.fromCharCode(0);
function ignoreSpaces(e) {
    e = e || window.event;
    var char = String.fromCharCode(e.charCode);
    if (ignoreChars.indexOf(char) >= 0 && ignoreChars.indexOf(lastkey) >= 0) {
        lastkey = char;
        return false; }
    else {
        lastkey = char;
        return true; } }

var lastkey2;
var ignoreChars2 = ' \r\n'+String.fromCharCode(0);
function ignoreSpaces2(e) {
    e = e || window.event;
    var char2 = String.fromCharCode(e.charCode);
    if (ignoreChars2.indexOf(char2) >= 0 && ignoreChars2.indexOf(lastkey2) >= 0) {
        lastkey2 = char2;
        return false; }
    else {
        lastkey2 = char2;
        return true; } }
<input type = "text" name = "real_name" placeholder = "Real Name" id = "real_name" required minlength = "6" maxlength = "24" tabindex = "1" onkeydown = "SpaceBlock()" onkeypress = "return ignoreSpaces(event);" style = "text-transform: capitalize;" >

<input type = "text" name = "display_name" placeholder = "Display Name" id = "display_name" required minlength = "6" maxlength = "24" tabindex = "1" onkeydown = "SpaceBlock()" onkeypress = "return ignoreSpaces(event);" style = "text-transform: capitalize;" >

Это последнее, что мне нужно для моей формы, просто надеюсь, что кто-нибудь поможет. Спасибо!

Имейте в виду, что все усилия, которые вы вкладываете в проверку ввода в браузере, должны быть снова вложены на сервере. Потому что пользователи всегда могут манипулировать клиентом, как показано здесь. Возможно, проще проверить только сервер?

Heiko Theißen 31.08.2024 09:16

Я знаю, я могу сделать все это с помощью php, обрезки, чтобы избавиться от всех последовательных пробелов и пробелов в начале и конце, и в HTML, чтобы использовать заглавные буквы, так что это все, что осталось, чтобы убедиться, что первый символ буква, которую я могу понять на php, но я хочу предотвратить использование цифр и специальных символов в первом символе и принудительно ввести букву с помощью javascript

Antarctica-UFO 31.08.2024 09:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
52
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот улучшенное и более организованное решение, которое обрабатывает следующие случаи:

  1. Предотвращение превращения первого символа в пробел.
  2. Предотвращение последовательных пробелов.
  3. Принудительное написание каждого слова во входных данных с заглавной буквы.
  4. Убедитесь, что первым символом является буква, а не цифра или специальный символ.

document.addEventListener("DOMContentLoaded", function () {
    // Function to handle all keypress events
    function handleKeyPress(event) {
        const input = event.target;
        const char = String.fromCharCode(event.which);

        // Prevent first character from being a space
        if (input.selectionStart === 0 && event.code === "Space") {
            event.preventDefault();
            return;
        }

        // Prevent first character from being a non-letter
        if (input.selectionStart === 0 && !/^[a-zA-Z]$/.test(char)) {
            event.preventDefault();
            return;
        }

        // Prevent consecutive spaces
        const lastChar = input.value.charAt(input.selectionStart - 1);
        if (char === " " && lastChar === " ") {
            event.preventDefault();
            return;
        }
    }

    // Attach event listeners to input fields
    const inputs = document.querySelectorAll("input[name='real_name'], input[name='display_name']");
    inputs.forEach(input => {
        input.addEventListener("keypress", handleKeyPress);

        // Set text-transform to capitalize to force capitalization of each word
        input.style.textTransform = "capitalize";
    });
});
<html lang = "en">
  <head>
    <meta charset = "UTF-8" />
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input
      type = "text"
      name = "real_name"
      placeholder = "Real Name"
      id = "real_name"
      required
      minlength = "6"
      maxlength = "24"
      tabindex = "1"
    />

    <input
      type = "text"
      name = "display_name"
      placeholder = "Display Name"
      id = "display_name"
      required
      minlength = "6"
      maxlength = "24"
      tabindex = "2"
    />
    <script src = "./temp.js"></script>
  </body>
</html>
stackoverflow.com/help/gen-ai-policy
Teemu 31.08.2024 10:10

Спасибо! Вы получите награду «Самый полезный гений дня»! Вау!! Я даже понимаю, как его изменить и заставить работать с другими входами. Я люблю это!! Еще раз спасибо!!!

Antarctica-UFO 31.08.2024 10:29

Я пытаюсь создать целую вторую подобную систему для ввода электронной почты и обращаться с ней по-другому, и она работает только с заглавными буквами и не работает ни с чем другим. Я пытаюсь предотвратить дублирование. и @ при вводе электронной почты. Можете ли вы помочь мне еще раз, пожалуйста? Я даже попытался переименовать имя функции (x2) и удалить второй document.addEventListender("DOMContentLoaded"..... с дополнительными скобками выше, чтобы попытаться заставить его работать с первым.

Antarctica-UFO 31.08.2024 17:47

Другие вопросы по теме