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