Поле мобильного номера с разделителями

Question

Поле мобильного номера с разделителями

0

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

1 - Код страны неизменяемый (3 цифры) 2 - Редактируемый 2-значный номер 3 - Пользователь может ввести свой уникальный номер (7 цифр)

Разделение должно быть в том же Input TextBox, где я начинаю печатать * каждая часть должна быть разделена пробелом или "-" автоматически

Мне не разрешено использовать какой-либо плагин. Выручи меня!!!

ConnectingCode 18 дек. 2013, в 06:29

Источник

0

Вы хотите 3 разных текстовых поля для этого или вы хотите сделать это в одном?
Anup 18 дек. 2013, в 05:36
0

Не поучительное упражнение по программированию.
Jukka K. Korpela 18 дек. 2013, в 05:46
0

Мне нужно показать это как одно текстовое поле ... но я могу использовать несколько текстовых полей и оформить как одно текстовое поле
ConnectingCode 18 дек. 2013, в 05:52

Показать ещё 1 комментарий

Теги:

javascript

jquery

css

kendo-ui

1 ответ

Ещё вопросы

Вы хотите 3 разных текстовых поля для этого или вы хотите сделать это в одном?
Не поучительное упражнение по программированию.
Мне нужно показать это как одно текстовое поле ... но я могу использовать несколько текстовых полей и оформить как одно текстовое поле

Surjith S M · Accepted Answer · 2013-12-18T03-14-00.000Z

Я создал Jsfiddle

Один с тремя текстовыми полями и другой, завернутый в div [Fake textbox]

<input type="text" max-length="3" value="+91" disabled="disabled" class="small"/>
<input type="text" max-length="2" value="43" class="small"/>
<input type="text" max-length="7" value=""/>

.small {
    width:30px;
    text-align:center;
}

или

<div class="inputwrap">
 <input type="text" max-length="3" value="+91" disabled="disabled" class="small"/>
<input type="text" max-length="2" value="43" class="small"/>
<input type="text" max-length="7" value=""/>   
</div>

.inputwrap {
    border:1px solid #c6c6c6;
    background:#FFF;
    padding:5px;
    float:left;
}

.inputwrap input {
    background:transparent;
    border:0;
    outline:none;
}

Это то, что я ожидал ... но я использую Kendo UI ... так что два смежных поля ввода перекрываются