как отключить кнопку и показать заголовок ввода

ProgramBox

как отключить кнопку и показать заголовок ввода

Post author:admin
Запись опубликована:10 ноября, 2022
Post category:Вопросы по программированию

#javascript

Вопрос:

Привет всем, у меня есть следующий код: мой код

 let companyNameField = document.getElementById('FormField_6_input');
let button = document.getElementById('ContinueButton_6');
companyNameField.addEventListener('input', validate);

function validate() {
  var companyNameValue = companyNameField.value;
  var companyRGEX = /[2-9]d{3}/;

  if (companyNameValue.match(companyRGEX)) {
    button.disabled = false;

  } else {
    button.disabled = true;
    companyNameField.setAttribute("pattern", '[2-9]\d{3}');
    companyNameField.setAttribute("title", "wrong");
  }
}

 <form action="" onchange="validate()">
  <input type="text" id="FormField_6_input" name="CompanyName" />
  <button id="ContinueButton_6">Continue</button>
</form>

Развернуть фрагмент

С помощью моей функции я проверяю, удовлетворяет ли мой вводимый текст моему регулярному выражению. Если нет, то я отключил свою кнопку.

При отключении я также хочу установить атрибут «title» для моего ввода для отображения сообщения.

В журнале консоли я вижу, что шаблон и заголовок были успешно добавлены к моему вводу, но когда я начинаю писать что-то неправильно, только моя кнопка отключается, а заголовок не показывает сообщение об ошибке.

Как я могу это исправить?

1. извините, но ваш пример кода, похоже, работает для меня. При вводе слова кнопка get отключается, а заголовок gget устанавливается на «неправильный». Возможно, я не правильно понял ваш вопрос

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

3. да, вы правы, заголовок отображается при наведении курсора, но это не удобно для пользователя. Как я могу показать этот заголовок без наведения курсора мыши?

Ответ №1:

На самом деле атрибут title может отображаться только при наведении курсора мыши на тег, поэтому добавление заголовка во ввод не подходит. Возможно, это сработает в следующем коде:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" onchange="validate()">
        <input type="text" id="FormField_6_input" name="CompanyName" />
        <button id="ContinueButton_6">Continue</button>
        <span id="wrong_text" style="display:none">wrong</span>
    </form>

    <script>
        let companyNameField = document.getElementById('FormField_6_input');
        let button = document.getElementById('ContinueButton_6');
        let wrongText = document.getElementById('wrong_text');
        companyNameField.addEventListener('input', validate);

        function validate() {
            var companyNameValue = companyNameField.value;
            var companyRGEX = /[2-9]d{3}/;

            if (companyNameValue.match(companyRGEX)) {
                button.disabled = false;
                wrongText.style.display = "inline";
            } else {
                button.disabled = true;
                companyNameField.setAttribute("pattern", '[2-9]\d{3}');
                companyNameField.setAttribute("title", "wrong");
                wrongText.style.display = "none";
            }
        }
    </script>
</body>
</html>

Ответ №2:

Посмотрите на приведенный выше фрагмент, я попытался решить вашу проблему. Дайте мне знать, если это сработает

     let companyNameField = document.getElementById("FormField_6_input");
    let button = document.getElementById("ContinueButton_6");
    companyNameField.addEventListener("input", validate);

    function validate() {
      var companyNameValue = companyNameField.value;
      var companyRGEX = /[2-9]d{3}/;

      if (companyNameValue.match(companyRGEX)) {
        button.disabled = false;
      } else {
        button.disabled = true;
        companyNameField.setAttribute("pattern", "[2-9]\d{3}");
        companyNameField.setAttribute("title", "wrong");
      }
    }

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <form action="">
      <input
        type="text"
        id="FormField_6_input"
        name="CompanyName"
        onchange="validate()"
      />
      <button id="ContinueButton_6" disabled>Continue</button>
    </form>
  </body>
</html>

Развернуть фрагмент

Ответ №3:

вместо использования регулярных выражений вы также можете использовать parseInt(); и isNaN(); для ввода только чисел.