Как установить соответствие между введенными данными в поле ввода и выбранной опцией в выпадающем списке?

Question

Леопольд

javascript

Как установить соответствие между введенными данными в поле ввода и выбранной опцией в выпадающем списке?

Как можно настроить проверку вводимых данных, чтобы при выборе опции 'Телефон' можно было вводить только цифры? Мой текущий код не работает корректно при первом запуске страницы, требуется переключение на другую опцию и затем обратно на 'Телефон' для корректной работы. После этих шагов ввод только цифр становится доступен при любой выбранной опции. Мой код доступен по ссылке ниже.

18 марта 2024 г. 14:19

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для установления соответствия между введенными данными в поле ввода и выбранной опцией в выпадающем списке, вы можете использовать JavaScript. 

Вот пример простого кода, который поможет решить вашу проблему с проверкой вводимых данных:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Проверка ввода данных</title>
</head>
<body>
    <label for="option">Выберите опцию:</label>
    <select id="option">
        <option value="email">Email</option>
        <option value="phone">Телефон</option>
    </select>
    <br>
    <label for="input">Введите данные:</label>
    <input type="text" id="input">
    
    <script>
        const option = document.getElementById('option');
        const input = document.getElementById('input');
        
        option.addEventListener('change', function() {
            if (option.value === 'phone') {
                input.addEventListener('keyup', function(e) {
                    const regexp = /^[0-9]*$/;
                    if (!regexp.test(e.target.value)) {
                        alert('Пожалуйста, введите только цифры');
                        e.target.value = '';
                    }
                });
            } else {
                input.removeEventListener('keyup', function() {
                    //удаляем обработчик события
                });
            }
        });
    </script>
</body>
</html>
```

Этот код добавляет обработчик события на изменение выбранной опции в выпадающем списке. Если выбрана опция 'Телефон', то добавляется обработчик события на клавишу "keyup" для поля ввода данных. В этом обработчике происходит проверка введенных данных на соответствие регулярному выражению, которое разрешает только цифры. Если данные не соответствуют регулярному выражению, то выводится предупреждение и данные очищаются.

Надеюсь, что это поможет вам решить вашу проблему.

Answer 2

В реальной жизни номер телефона состоит не только из цифр, там есть ещё и скобки, дефисы... 
 
 const allSelects = document.querySelectorAll('.contactType');

function toggleInputType(selectElement) {
  const inputElement = selectElement.parentElement.querySelector('.contactDescr');
  inputElement.type = selectElement.value === 'tel'
    ? 'tel'
    : 'text';
}

for (const select of allSelects) {
  select.addEventListener('change', () => {
    toggleInputType(select)
  });
}