julianc julianc - 5 months ago 9
HTML Question

separate fields for a string

I have a string that is parsed using regex groups. One group contains 7 characters. However, I don't want to have the user input all 7 characters on the same field. Instead, I want them to be able to enter 3 of those characters into one field and the remaining 4 in another one. Is this possible? If it is, how can I utilize the onkeyup event on these separate fields?

html:

<input style="float:left; width:5em" type=text name="txtPhoneArea" id="txtPhoneArea" width="5" maxlength="5" onkeyup="tabout(this,'txtPhoneNumber')" value="@Model.Store.AreaNumber" />
<input style="float:left; width:5em" type=text name="txtPhoneNumber" id="txtPhoneNumber" width="5" maxlength="3" value="@Model.Store.PhoneNumber" />
<input style="float:left; width:5em" type=text name="txtPhoneNumber" id="txtPhoneNumber" width="5" maxlength="4" value="@Model.Store.PhoneNumber"/>


function:

function tabout(fromTextBox, toTextBox) {
var length = fromTextBox.value.length;
var maxLength = fromTextBox.getAttribute("maxLength");
if (length == maxLength) {
document.getElementById(toTextBox).focus();
}
};

Answer

Add one more onkeyup function on second input and id - txtPhoneNumber was added to two inputs which was wrong and each input field should have different ids ,so changed third input field id to txtPhone

<input style="float:left; width:5em" type=text name="txtPhoneArea" id="txtPhoneArea" width="5" maxlength="3" onkeyup="tabout(this,'txtPhoneNumber')" value="" />
<input style="float:left; width:5em" type=text name="txtPhoneNumber" onkeyup="tabout(this,'txtPhone')" id="txtPhoneNumber" width="5" maxlength="3" value="" />
<input style="float:left; width:5em" type=text name="txtPhone" id="txtPhone" width="5" maxlength="4" value="" />

http://codepen.io/nagasai/pen/PzmyYV