Поле для вода телефона

@Katerina1993 · Регистрация: 17.01.2017

Студворк — интернет-сервис помощи студентам

Как сделать специальное поле для ввода телефон как на ozon.ru? Вот пример:
telephone.swf

@Пифагор · 20.06.2017, 16:43

http://htmlbook.ru/html/INPUT/TYPE type="tel", либо jQuery input-mask.

@Katerina1993 · 20.06.2017, 23:54 **[ТС]**

Нашла рабочий пример на javascript.ru форуме, без всяких jQuery библиотек.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE HTML>
<html>
<head>
  <title>Маска javascript</title>
  <meta charset="utf-8">
</head>
 
<body>
<form action="" method="post">
    <p><input value="" type="text" name="username"></p>
    <p><input class="tel" type="text" value="+7(___)___-____"></p>
    <p><input type="submit" value="Отправить"></p>
</form>
<script>
window.addEventListener("DOMContentLoaded", function() 
{
function setCursorPosition(pos, elem) {
    
    elem.focus();
    if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
    else if (elem.createTextRange) {
        var range = elem.createTextRange();
        range.collapse(true);
        range.moveEnd("character", pos);
        range.moveStart("character", pos);
        range.select()
    }
}
 
function mask(event) {
    var matrix = this.defaultValue,
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = this.value.replace(/\D/g, "");
        def.length >= val.length && (val = def);
    matrix = matrix.replace(/[_\d]/g, function(a) {
        return val.charAt(i++) || "_"
    });
    this.value = matrix;
    i = matrix.lastIndexOf(val.substr(-1));
    i < matrix.length && matrix != this.defaultValue ? i++ : i = matrix.indexOf("_");
    setCursorPosition(i, this)
}
    var input = document.querySelector(".tel");;
    input.addEventListener("input", mask, false)
});
</script>
</body>
</html>

Этот пример работает только есть одна проблема если отключить javascript, то пользователь сможет вводить все что угодно как еще прописать условие на сервере т.е. в php, чтобы пользователь вводил только цифры своего телефона?

@Ctariy · 21.06.2017, 10:34

HTML5
1
2
3
4
5
    
<p>Введите телефон в формате 8-xxx-xxx-ххх, где вместо x 
    должна быть цифра:</p>
    <p><input type="tel" pattern="8-[0-9]{3}-[0-9]{3}-[0-9]{3}"></p>
    <p><input type="submit" value="Отправить"></p>

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@Katerina1993 403 / 19 / 5 Регистрация: 17.01.2017 Сообщений: 572

	Поле для вода телефона 20.06.2017, 15:42. Показов 6087. Ответов 3 Метки нет (Все метки) Как сделать специальное поле для ввода телефон как на ozon.ru? Вот пример: telephone.swf 0

@Пифагор 2172 / 1655 / 840 Регистрация: 10.01.2015 Сообщений: 5,207
	20.06.2017, 16:43
	http://htmlbook.ru/html/INPUT/TYPE type="tel", либо jQuery input-mask. 0