Как на чистом JS сделать проверку номера телефона и вывода картинки в зависимости от кода страны ( в теме почти готовый скрипт)?

Question

[Mesuti]

Привет!
Как сделать проверку input и вывод флага в зависимости от кода страны?

Встал на проверке содержимого строки(

Comments

[Dima Polos]

Картинки флагов есть? Есть список кодов? Откуда база?
Вручную все кода через if не перечислить, как минимум не рационально, как по мне

[Mesuti]

Dima Polos, Там всего 10 стран. Действительно, лучше через массив.

Answer 1

[0xD34F]

Делаем массив стран с кодами и флагами:

const countries = [
  { code: ..., flag: ... },
  { code: ..., flag: ... },
  ...
];

Ищем совпадение с введёнными данными:

const country = countries.find(n => !inputCode.value.indexOf(n.code));
inputFlag.src = country ? country.flag : '';

https://jsfiddle.net/dskz4u7b

Comments

[Mesuti]

Спасибо!
Гений JavaScript!

[zendor]

0xD34F А почему !inputCode.value.indexOf(n.code)?
Может быть так: ~inputCode.value.indexOf(n.code)?

[0xD34F]

zendor, речь про телефон идёт. У телефонов код вроде бы в начале.

[Mesuti]

Подскажите, пожалуйста, как называется способ поиска совпадения с введенными данными?

Чтобы можно было прочитать у учебнике learn.javascript.ru

[zendor]

0xD34F, Это понятно, но что если сначала пробел, а потом код страны, не сработает же. Естественно trim() никто не запрещал.

[0xD34F]

Mesuti, это не способ. Это метод массива.

[Mesuti]

можно еще вопрос?

Если у input уже есть значение? Value cтавится на основании IP пользователя.
Допустим:
<input type="text" value="+7" id="inputcode">

Нужно ставить проверку при загрузке и проверку addlistener?
Примерно так:

inputCode.addEventListener('input', checkCountry);
    window.onload = checkCountry;

    function checkCountry() {
        const country = countries.find(n => !this.value.indexOf(n.code));
        inputFlag.src = country ? country.flag : '';
    }

[0xD34F]

Mesuti,

Нужно ставить проверку при загрузке и проверку addlistener?

Откуда мне знать? Зависит от того, чего вы хотите добиться. Хотите, чтобы флаг показывался сразу - да, вызывайте при загрузке. Только this замените на inputCode, или как там называется ссылка на инпут.

[Mesuti]

zendor, пробелы и текст исключены из телефонов, чаще всего стоит валидация. Но мысль интересная. =) спасибо за участие

[Mesuti]

0xD34F, спасибо!

[Mesuti]

0xD34F, можно последний вопрос? допустим, если нет ни одного совпадения. То как отключить, либо сделать дефолтный флаг?
На пк все в порядке, если нет в массиве кода страны, то картинка пропадает.
А на телефоне остается последний выбранный код страны.
Поэтому есть смысл принудительно сбрасывать на дефолтный либо отключать
Если не находится код страны, то результат выражения такой

inputFlag.src = country ? country.flag : '';
  console.log(inputFlag.src);  // РЕЗУЛЬТАТ https://fiddle.jshell.net/_display/

Значит надо делать проверку на наличие _display в адресе?

[0xD34F]

Mesuti,

А на телефоне...

Это не ко мне.