ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Маска ввода номера телефона на jQuery

Маска ввода номера телефона на jQuery

Маска ввода номера телефона на jQuery
В статье узнаете про создание ввода номера телефона, которое осуществляется при помощи маски, где идет номер в зависимости от выбранной страны. Это не сложный в своем использовании ввода JQuery маска для маскирования и дата телефонного номера, который производится в стандартных полях ввода. Как можно заметить, что сама установка здесь весьма проста для обывателя.

Здесь все понятно по своему представлению, где правильно вводиться данные в базу данных, что предоставляя маски ввода для полей, которые содержат данные, что всегда отформатированы определенным образом. Например, вы можете использовать маску ввода, чтобы убедиться, что люди вводят правильно отформатированные номера телефонов в поле номера телефона.

Рассматривая основу маску вода, то это строка, что предназначена для символов, которая указывает формат оптимальных значений в определенных условиях ввода. Где аналогично можно задействовать маски ввода в полях таблицы, где также могут быть значение полей для запросов и отчетах, где маска ввода изначально сохраняется как свойство объекта.

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

Части маски ввода

Маска из одной обязательной части и двух дополнительных, где происходит разделение, виде точкой или прописанной запятой, где каждая часть заключается в следующем:

1. Он включает символы, а также строки из серии символы, где идут заполнители и литеральные данные, такие как точки и дефисы, и могут быть скобки.

2. Эта часть является необязательной и касается встроенных символов маски и того, как они хранятся в поле. Если вторая часть установлена в 0, символы сохраняются вместе с данными.

3. Эта часть входной маски, что является необязательными и указываются в один символ или пробел, который задействован для заполнения. Как видим, что изначально использует подчеркивание (_). Где входной маски указываются в качестве символа-заполнителя должен использоваться дефис ( - ) вместо подчеркивания ( _ ), что делает необязательным ввод кода под заданный город.

Визуально смотрится:

Результаты поиска Все результаты Маска ввода для HTML элемента input

Установка:

HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>

HTML

Код
<form>
<input type="text" name="phone" placeholder="Номер телефона" required style="width:100%;position:relative;margin-bottom:0;height:50px;border-radius:8px;border-color:white;margin-bottom:10px;margin-top:10px;padding-left:10px;border-style:solid;border-width:2px;" />
<input type="text" name="phone" placeholder="Номер телефона" required style="width:100%;position:relative;margin-bottom:0;height:50px;border-radius:8px;border-color:white;margin-bottom:10px;margin-top:10px;padding-left:10px;border-style:solid;border-width:2px;" />
</form>

JS

Код
$('[name="phone"]').mask("+38(999) 999-9999");

Вы задействовали маску ввода, когда важно, чтобы формат входных значений был согласованным. Например, вы можете использовать маску ввода с полем, в котором хранятся телефонные номера, так что для доступа требуется десять цифр ввода.

Если кто-то введет номер телефона без кода города, то не получиться, а точнее не запишет данные, пока не будут добавлены данные кода города. Что смотря представленную конструкцию она прописывается изначально, где ставится под данный регион.

Демонстрация
27 Июля 2020 Загрузок: 1 Просмотров: 1489 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 27 Июля 2020 05:311
0
Также по аналогичному материалу, что идет в одном направление, это по материалу, что на прямую связан, но идет как отдельный вариант, как маска ввода номера телефона с помощью jQuery, что ранее был размещен, что возможно будет для вас интересен.
avatar