как я могу создать текстовое поле телефона в HTML

Question

Я хочу сделать текстовое поле для телефона на моей html-странице. У кого-то есть идея, как я могу это сделать. Спасибо

Answer 1

Это плагин, который я всегда использую для этого.прекрасно работает:

http://digitalbush.com/projects/masked-input-plugin/

для вашего примера:

jQuery(function($){
   $(".phone").mask("(999) 999-9999",{placeholder:" "});
});

Answer 2

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

Более сложный подход будетиметь 3 текстовых поля для каждой части номера.Затем поместите () и - между полями.Однако это может расстроить пользователей, поскольку им придется переходить между полями или щелкать между ними.

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

Другой способ сделать это - вставить () и - автоматически с помощью javascript после изменения номера.,Это может работать лучше, чем описанный выше метод, но все равно вызовет некоторые проблемы с редактированием.Это может также выглядеть странно до того, как числа будут добавлены.

Стоит отметить, что не существует реального международного стандарта для телефонных номеров.У вас могут возникнуть проблемы, если кто-то попытается использовать код страны или что-то на вашем сайте.Если бы я был тобой, я бы просто придерживался классического текстового поля, каким бы ужасным оно ни было.

Answer 3

Вы можете попробовать что-то вроде этого

<input type="text" id="phoneNumber" placeholder="(123)123-1234" />

CSS

#phoneNumber{
    margin:1em;
    border:2px solid #ffc600;
    font-size:2em;
    border-radius:10px;
    padding:.25em;
}

Пример: http://jsfiddle.net/RgTTt/

NB: Placeholder во всех современных браузерах будет отображать все, что вам нравится в поле ввода, а затем исчезнет, ​​как только пользователь начнет вводить текст в поле. Если вы хотите, чтобы круглые скобки - () - были цветными, вам нужно будет использовать несколько интервалов и пользовательский фрагмент JavaScript.