带分隔符的移动数字字段

Question

我需要设置移动号码字段的格式，以便将其分为以下三部分：

1-国家代码不可编辑(3位)2-可编辑2位数字3-用户可以输入他们的唯一号码(7位)

分隔应该在相同的输入TextBox中，我开始键入*每个部分应该用空格或"-“自动分隔。

我不允许使用任何插件。帮帮我！

Answer 1

我创建了一个小提琴手

一个有三个文本框，另一个包裹在div假文本框中

<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;
}